@charset "UTF-8";
.photobase img.photo_y,
.photobase img.photo_x, .diary_body .photobase.a00 img {
  -moz-box-shadow: 3px 3px 1px -2px rgba(0, 0, 0, 0.05), -3px -3px 1px -2px rgba(0, 0, 0, 0.05), -3px 3px 1px -2px rgba(0, 0, 0, 0.05), 3px -3px 1px -2px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 3px 3px 1px -2px rgba(0, 0, 0, 0.05), -3px -3px 1px -2px rgba(0, 0, 0, 0.05), -3px 3px 1px -2px rgba(0, 0, 0, 0.05), 3px -3px 1px -2px rgba(0, 0, 0, 0.05);
  box-shadow: 3px 3px 1px -2px rgba(0, 0, 0, 0.05), -3px -3px 1px -2px rgba(0, 0, 0, 0.05), -3px 3px 1px -2px rgba(0, 0, 0, 0.05), 3px -3px 1px -2px rgba(0, 0, 0, 0.05);
  border: 4px solid #fff;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  overflow-y: scroll;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

input, textarea {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

a:focus {
  outline: none;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*/
     /*/
height: auto;
overflow: hidden;
/**/
}

.both {
  clear: both;
}

.inline_block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*----------------------------------------------------
 elements_a
----------------------------------------------------*/
html {
  height: 100%;
}

body {
  height: 100%;
  background-color: #c1bbab;
  color: #666;
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* フォントサイズ自動調整 */
  text-rendering: optimizeLegibility;
  /*-カーニングしてくれるらしい-*/
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent !important;
  /*-タップ時の枠線を消す-*/
}
button.gray_b {
  cursor: default;
  outline: none;
}

* {
  /*- 初期化)borderとpaddingを幅と高さに含める-*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a:visited {
  color: #eee;
}

a:link {
  text-decoration: none;
  color: #666;
}

.fntbold {
  font-weight: bold;
}

.fntsize_s {
  /*-フォントを少し縮めたい時-*/
  font-size: 90%;
  letter-spacing: -0.05em;
}

.col_red {
  color: #ff743e;
}

a.col_red {
  cursor: pointer;
  /*-基本ボタンアクション(透明有効)-*/
}
a.col_red:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}
a.col_red:active {
  /*-クリックで2px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}
a.col_red:link {
  color: #ff743e;
}

/*-灰色文字-*/
.col_gray30 {
  color: #4d4d4d;
}

.col_gray40 {
  color: #666666;
}

.col_gray50 {
  color: gray;
}

.col_gray55 {
  color: #8c8c8c;
}

.col_gray60 {
  color: #999999;
}

.col_gray65 {
  color: #a6a6a6;
}

.col_gray70 {
  color: #b3b3b3;
}

.col_gray75 {
  color: #bfbfbf;
}

.col_gray80 {
  color: #cccccc;
}

.col_gray85 {
  color: #d9d9d9;
}

.col_gray90 {
  color: #e6e6e6;
}

.col_gray93 {
  color: #ededed;
}

.col_gray95 {
  color: #f2f2f2;
}

.col_gray98 {
  color: #fafafa;
}

.bg_gray30 {
  color: #4d4d4d;
}

.bg_gray40 {
  color: #666666;
}

.bg_gray50 {
  color: gray;
}

.bg_gray55 {
  color: #8c8c8c;
}

.bg_gray60 {
  color: #999999;
}

.bg_gray65 {
  color: #a6a6a6;
}

.bg_gray70 {
  color: #b3b3b3;
}

.bg_gray75 {
  color: #bfbfbf;
}

.bg_gray80 {
  color: #cccccc;
}

.bg_gray85 {
  color: #d9d9d9;
}

.bg_gray90 {
  color: #e6e6e6;
}

.bg_gray93 {
  color: #ededed;
}

.bg_gray95 {
  color: #f2f2f2;
}

.bg_gray98 {
  color: #fafafa;
}

.signboard_r {
  background-color: #b3b3b3;
  display: inline-block;
  color: #fff;
  height: 20px;
  position: relative;
  padding: 2px;
  margin-right: 12px;
}
.signboard_r:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 12px;
  border-color: transparent transparent transparent #b3b3b3;
  position: absolute;
  left: 100%;
  top: 0;
}

.triangle13 {
  /*-先頭に三角が付いた見出し-*/
  font-size: 120%;
  position: relative;
  margin: 5px;
}
.triangle13:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #9ecc21;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.triangle13 span {
  color: #9ecc21;
  font-size: 130%;
  display: inline-block;
  margin: 0 3px 0 0;
  letter-spacing: 0.1em;
}

.align_r {
  text-align: right;
}

.align_c {
  text-align: center;
}

.align_l {
  text-align: left;
}

.float_l {
  float: left;
}

.float_r {
  float: right;
}

.ml10 {
  margin-left: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 110px;
}

.ml11 {
  margin-left: 11px;
}

.mt11 {
  margin-top: 11px;
}

.mr11 {
  margin-right: 11px;
}

.mb11 {
  margin-bottom: 121px;
}

.ml12 {
  margin-left: 12px;
}

.mt12 {
  margin-top: 12px;
}

.mr12 {
  margin-right: 12px;
}

.mb12 {
  margin-bottom: 132px;
}

.ml13 {
  margin-left: 13px;
}

.mt13 {
  margin-top: 13px;
}

.mr13 {
  margin-right: 13px;
}

.mb13 {
  margin-bottom: 143px;
}

.ml14 {
  margin-left: 14px;
}

.mt14 {
  margin-top: 14px;
}

.mr14 {
  margin-right: 14px;
}

.mb14 {
  margin-bottom: 154px;
}

.ml15 {
  margin-left: 15px;
}

.mt15 {
  margin-top: 15px;
}

.mr15 {
  margin-right: 15px;
}

.mb15 {
  margin-bottom: 165px;
}

.ml16 {
  margin-left: 16px;
}

.mt16 {
  margin-top: 16px;
}

.mr16 {
  margin-right: 16px;
}

.mb16 {
  margin-bottom: 176px;
}

.ml17 {
  margin-left: 17px;
}

.mt17 {
  margin-top: 17px;
}

.mr17 {
  margin-right: 17px;
}

.mb17 {
  margin-bottom: 187px;
}

.ml18 {
  margin-left: 18px;
}

.mt18 {
  margin-top: 18px;
}

.mr18 {
  margin-right: 18px;
}

.mb18 {
  margin-bottom: 198px;
}

.ml19 {
  margin-left: 19px;
}

.mt19 {
  margin-top: 19px;
}

.mr19 {
  margin-right: 19px;
}

.mb19 {
  margin-bottom: 209px;
}

.ml20 {
  margin-left: 20px;
}

.mt20 {
  margin-top: 20px;
}

.mr20 {
  margin-right: 20px;
}

.mb20 {
  margin-bottom: 220px;
}

.ml21 {
  margin-left: 21px;
}

.mt21 {
  margin-top: 21px;
}

.mr21 {
  margin-right: 21px;
}

.mb21 {
  margin-bottom: 231px;
}

.ml22 {
  margin-left: 22px;
}

.mt22 {
  margin-top: 22px;
}

.mr22 {
  margin-right: 22px;
}

.mb22 {
  margin-bottom: 242px;
}

.ml23 {
  margin-left: 23px;
}

.mt23 {
  margin-top: 23px;
}

.mr23 {
  margin-right: 23px;
}

.mb23 {
  margin-bottom: 253px;
}

.ml24 {
  margin-left: 24px;
}

.mt24 {
  margin-top: 24px;
}

.mr24 {
  margin-right: 24px;
}

.mb24 {
  margin-bottom: 264px;
}

.ml25 {
  margin-left: 25px;
}

.mt25 {
  margin-top: 25px;
}

.mr25 {
  margin-right: 25px;
}

.mb25 {
  margin-bottom: 275px;
}

.ml26 {
  margin-left: 26px;
}

.mt26 {
  margin-top: 26px;
}

.mr26 {
  margin-right: 26px;
}

.mb26 {
  margin-bottom: 286px;
}

.ml27 {
  margin-left: 27px;
}

.mt27 {
  margin-top: 27px;
}

.mr27 {
  margin-right: 27px;
}

.mb27 {
  margin-bottom: 297px;
}

.ml28 {
  margin-left: 28px;
}

.mt28 {
  margin-top: 28px;
}

.mr28 {
  margin-right: 28px;
}

.mb28 {
  margin-bottom: 308px;
}

.ml29 {
  margin-left: 29px;
}

.mt29 {
  margin-top: 29px;
}

.mr29 {
  margin-right: 29px;
}

.mb29 {
  margin-bottom: 319px;
}

.ml30 {
  margin-left: 30px;
}

.mt30 {
  margin-top: 30px;
}

.mr30 {
  margin-right: 30px;
}

.mb30 {
  margin-bottom: 330px;
}

.ml31 {
  margin-left: 31px;
}

.mt31 {
  margin-top: 31px;
}

.mr31 {
  margin-right: 31px;
}

.mb31 {
  margin-bottom: 341px;
}

.ml32 {
  margin-left: 32px;
}

.mt32 {
  margin-top: 32px;
}

.mr32 {
  margin-right: 32px;
}

.mb32 {
  margin-bottom: 352px;
}

.ml33 {
  margin-left: 33px;
}

.mt33 {
  margin-top: 33px;
}

.mr33 {
  margin-right: 33px;
}

.mb33 {
  margin-bottom: 363px;
}

.ml34 {
  margin-left: 34px;
}

.mt34 {
  margin-top: 34px;
}

.mr34 {
  margin-right: 34px;
}

.mb34 {
  margin-bottom: 374px;
}

.ml35 {
  margin-left: 35px;
}

.mt35 {
  margin-top: 35px;
}

.mr35 {
  margin-right: 35px;
}

.mb35 {
  margin-bottom: 385px;
}

.ml36 {
  margin-left: 36px;
}

.mt36 {
  margin-top: 36px;
}

.mr36 {
  margin-right: 36px;
}

.mb36 {
  margin-bottom: 396px;
}

.ml37 {
  margin-left: 37px;
}

.mt37 {
  margin-top: 37px;
}

.mr37 {
  margin-right: 37px;
}

.mb37 {
  margin-bottom: 407px;
}

.ml38 {
  margin-left: 38px;
}

.mt38 {
  margin-top: 38px;
}

.mr38 {
  margin-right: 38px;
}

.mb38 {
  margin-bottom: 418px;
}

.ml39 {
  margin-left: 39px;
}

.mt39 {
  margin-top: 39px;
}

.mr39 {
  margin-right: 39px;
}

.mb39 {
  margin-bottom: 429px;
}

.ml40 {
  margin-left: 40px;
}

.mt40 {
  margin-top: 40px;
}

.mr40 {
  margin-right: 40px;
}

.mb40 {
  margin-bottom: 440px;
}

.ml41 {
  margin-left: 41px;
}

.mt41 {
  margin-top: 41px;
}

.mr41 {
  margin-right: 41px;
}

.mb41 {
  margin-bottom: 451px;
}

.ml42 {
  margin-left: 42px;
}

.mt42 {
  margin-top: 42px;
}

.mr42 {
  margin-right: 42px;
}

.mb42 {
  margin-bottom: 462px;
}

.ml43 {
  margin-left: 43px;
}

.mt43 {
  margin-top: 43px;
}

.mr43 {
  margin-right: 43px;
}

.mb43 {
  margin-bottom: 473px;
}

.ml44 {
  margin-left: 44px;
}

.mt44 {
  margin-top: 44px;
}

.mr44 {
  margin-right: 44px;
}

.mb44 {
  margin-bottom: 484px;
}

.ml45 {
  margin-left: 45px;
}

.mt45 {
  margin-top: 45px;
}

.mr45 {
  margin-right: 45px;
}

.mb45 {
  margin-bottom: 495px;
}

.ml46 {
  margin-left: 46px;
}

.mt46 {
  margin-top: 46px;
}

.mr46 {
  margin-right: 46px;
}

.mb46 {
  margin-bottom: 506px;
}

.ml47 {
  margin-left: 47px;
}

.mt47 {
  margin-top: 47px;
}

.mr47 {
  margin-right: 47px;
}

.mb47 {
  margin-bottom: 517px;
}

.ml48 {
  margin-left: 48px;
}

.mt48 {
  margin-top: 48px;
}

.mr48 {
  margin-right: 48px;
}

.mb48 {
  margin-bottom: 528px;
}

.ml49 {
  margin-left: 49px;
}

.mt49 {
  margin-top: 49px;
}

.mr49 {
  margin-right: 49px;
}

.mb49 {
  margin-bottom: 539px;
}

.ml50 {
  margin-left: 50px;
}

.mt50 {
  margin-top: 50px;
}

.mr50 {
  margin-right: 50px;
}

.mb50 {
  margin-bottom: 550px;
}

.ml51 {
  margin-left: 51px;
}

.mt51 {
  margin-top: 51px;
}

.mr51 {
  margin-right: 51px;
}

.mb51 {
  margin-bottom: 561px;
}

.ml52 {
  margin-left: 52px;
}

.mt52 {
  margin-top: 52px;
}

.mr52 {
  margin-right: 52px;
}

.mb52 {
  margin-bottom: 572px;
}

.ml53 {
  margin-left: 53px;
}

.mt53 {
  margin-top: 53px;
}

.mr53 {
  margin-right: 53px;
}

.mb53 {
  margin-bottom: 583px;
}

.ml54 {
  margin-left: 54px;
}

.mt54 {
  margin-top: 54px;
}

.mr54 {
  margin-right: 54px;
}

.mb54 {
  margin-bottom: 594px;
}

.ml55 {
  margin-left: 55px;
}

.mt55 {
  margin-top: 55px;
}

.mr55 {
  margin-right: 55px;
}

.mb55 {
  margin-bottom: 605px;
}

.ml56 {
  margin-left: 56px;
}

.mt56 {
  margin-top: 56px;
}

.mr56 {
  margin-right: 56px;
}

.mb56 {
  margin-bottom: 616px;
}

.ml57 {
  margin-left: 57px;
}

.mt57 {
  margin-top: 57px;
}

.mr57 {
  margin-right: 57px;
}

.mb57 {
  margin-bottom: 627px;
}

.ml58 {
  margin-left: 58px;
}

.mt58 {
  margin-top: 58px;
}

.mr58 {
  margin-right: 58px;
}

.mb58 {
  margin-bottom: 638px;
}

.ml59 {
  margin-left: 59px;
}

.mt59 {
  margin-top: 59px;
}

.mr59 {
  margin-right: 59px;
}

.mb59 {
  margin-bottom: 649px;
}

.ml60 {
  margin-left: 60px;
}

.mt60 {
  margin-top: 60px;
}

.mr60 {
  margin-right: 60px;
}

.mb60 {
  margin-bottom: 660px;
}

.ml61 {
  margin-left: 61px;
}

.mt61 {
  margin-top: 61px;
}

.mr61 {
  margin-right: 61px;
}

.mb61 {
  margin-bottom: 671px;
}

.ml62 {
  margin-left: 62px;
}

.mt62 {
  margin-top: 62px;
}

.mr62 {
  margin-right: 62px;
}

.mb62 {
  margin-bottom: 682px;
}

.ml63 {
  margin-left: 63px;
}

.mt63 {
  margin-top: 63px;
}

.mr63 {
  margin-right: 63px;
}

.mb63 {
  margin-bottom: 693px;
}

.ml64 {
  margin-left: 64px;
}

.mt64 {
  margin-top: 64px;
}

.mr64 {
  margin-right: 64px;
}

.mb64 {
  margin-bottom: 704px;
}

.ml65 {
  margin-left: 65px;
}

.mt65 {
  margin-top: 65px;
}

.mr65 {
  margin-right: 65px;
}

.mb65 {
  margin-bottom: 715px;
}

.ml66 {
  margin-left: 66px;
}

.mt66 {
  margin-top: 66px;
}

.mr66 {
  margin-right: 66px;
}

.mb66 {
  margin-bottom: 726px;
}

.ml67 {
  margin-left: 67px;
}

.mt67 {
  margin-top: 67px;
}

.mr67 {
  margin-right: 67px;
}

.mb67 {
  margin-bottom: 737px;
}

.ml68 {
  margin-left: 68px;
}

.mt68 {
  margin-top: 68px;
}

.mr68 {
  margin-right: 68px;
}

.mb68 {
  margin-bottom: 748px;
}

.ml69 {
  margin-left: 69px;
}

.mt69 {
  margin-top: 69px;
}

.mr69 {
  margin-right: 69px;
}

.mb69 {
  margin-bottom: 759px;
}

.ml70 {
  margin-left: 70px;
}

.mt70 {
  margin-top: 70px;
}

.mr70 {
  margin-right: 70px;
}

.mb70 {
  margin-bottom: 770px;
}

.ml71 {
  margin-left: 71px;
}

.mt71 {
  margin-top: 71px;
}

.mr71 {
  margin-right: 71px;
}

.mb71 {
  margin-bottom: 781px;
}

.ml72 {
  margin-left: 72px;
}

.mt72 {
  margin-top: 72px;
}

.mr72 {
  margin-right: 72px;
}

.mb72 {
  margin-bottom: 792px;
}

.ml73 {
  margin-left: 73px;
}

.mt73 {
  margin-top: 73px;
}

.mr73 {
  margin-right: 73px;
}

.mb73 {
  margin-bottom: 803px;
}

.ml74 {
  margin-left: 74px;
}

.mt74 {
  margin-top: 74px;
}

.mr74 {
  margin-right: 74px;
}

.mb74 {
  margin-bottom: 814px;
}

.ml75 {
  margin-left: 75px;
}

.mt75 {
  margin-top: 75px;
}

.mr75 {
  margin-right: 75px;
}

.mb75 {
  margin-bottom: 825px;
}

.ml76 {
  margin-left: 76px;
}

.mt76 {
  margin-top: 76px;
}

.mr76 {
  margin-right: 76px;
}

.mb76 {
  margin-bottom: 836px;
}

.ml77 {
  margin-left: 77px;
}

.mt77 {
  margin-top: 77px;
}

.mr77 {
  margin-right: 77px;
}

.mb77 {
  margin-bottom: 847px;
}

.ml78 {
  margin-left: 78px;
}

.mt78 {
  margin-top: 78px;
}

.mr78 {
  margin-right: 78px;
}

.mb78 {
  margin-bottom: 858px;
}

.ml79 {
  margin-left: 79px;
}

.mt79 {
  margin-top: 79px;
}

.mr79 {
  margin-right: 79px;
}

.mb79 {
  margin-bottom: 869px;
}

.ml80 {
  margin-left: 80px;
}

.mt80 {
  margin-top: 80px;
}

.mr80 {
  margin-right: 80px;
}

.mb80 {
  margin-bottom: 880px;
}

.ml81 {
  margin-left: 81px;
}

.mt81 {
  margin-top: 81px;
}

.mr81 {
  margin-right: 81px;
}

.mb81 {
  margin-bottom: 891px;
}

.ml82 {
  margin-left: 82px;
}

.mt82 {
  margin-top: 82px;
}

.mr82 {
  margin-right: 82px;
}

.mb82 {
  margin-bottom: 902px;
}

.ml83 {
  margin-left: 83px;
}

.mt83 {
  margin-top: 83px;
}

.mr83 {
  margin-right: 83px;
}

.mb83 {
  margin-bottom: 913px;
}

.ml84 {
  margin-left: 84px;
}

.mt84 {
  margin-top: 84px;
}

.mr84 {
  margin-right: 84px;
}

.mb84 {
  margin-bottom: 924px;
}

.ml85 {
  margin-left: 85px;
}

.mt85 {
  margin-top: 85px;
}

.mr85 {
  margin-right: 85px;
}

.mb85 {
  margin-bottom: 935px;
}

.ml86 {
  margin-left: 86px;
}

.mt86 {
  margin-top: 86px;
}

.mr86 {
  margin-right: 86px;
}

.mb86 {
  margin-bottom: 946px;
}

.ml87 {
  margin-left: 87px;
}

.mt87 {
  margin-top: 87px;
}

.mr87 {
  margin-right: 87px;
}

.mb87 {
  margin-bottom: 957px;
}

.ml88 {
  margin-left: 88px;
}

.mt88 {
  margin-top: 88px;
}

.mr88 {
  margin-right: 88px;
}

.mb88 {
  margin-bottom: 968px;
}

.ml89 {
  margin-left: 89px;
}

.mt89 {
  margin-top: 89px;
}

.mr89 {
  margin-right: 89px;
}

.mb89 {
  margin-bottom: 979px;
}

.ml90 {
  margin-left: 90px;
}

.mt90 {
  margin-top: 90px;
}

.mr90 {
  margin-right: 90px;
}

.mb90 {
  margin-bottom: 990px;
}

.ml91 {
  margin-left: 91px;
}

.mt91 {
  margin-top: 91px;
}

.mr91 {
  margin-right: 91px;
}

.mb91 {
  margin-bottom: 1001px;
}

.ml92 {
  margin-left: 92px;
}

.mt92 {
  margin-top: 92px;
}

.mr92 {
  margin-right: 92px;
}

.mb92 {
  margin-bottom: 1012px;
}

.ml93 {
  margin-left: 93px;
}

.mt93 {
  margin-top: 93px;
}

.mr93 {
  margin-right: 93px;
}

.mb93 {
  margin-bottom: 1023px;
}

.ml94 {
  margin-left: 94px;
}

.mt94 {
  margin-top: 94px;
}

.mr94 {
  margin-right: 94px;
}

.mb94 {
  margin-bottom: 1034px;
}

.ml95 {
  margin-left: 95px;
}

.mt95 {
  margin-top: 95px;
}

.mr95 {
  margin-right: 95px;
}

.mb95 {
  margin-bottom: 1045px;
}

.ml96 {
  margin-left: 96px;
}

.mt96 {
  margin-top: 96px;
}

.mr96 {
  margin-right: 96px;
}

.mb96 {
  margin-bottom: 1056px;
}

.ml97 {
  margin-left: 97px;
}

.mt97 {
  margin-top: 97px;
}

.mr97 {
  margin-right: 97px;
}

.mb97 {
  margin-bottom: 1067px;
}

.ml98 {
  margin-left: 98px;
}

.mt98 {
  margin-top: 98px;
}

.mr98 {
  margin-right: 98px;
}

.mb98 {
  margin-bottom: 1078px;
}

.ml99 {
  margin-left: 99px;
}

.mt99 {
  margin-top: 99px;
}

.mr99 {
  margin-right: 99px;
}

.mb99 {
  margin-bottom: 1089px;
}

.ml100 {
  margin-left: 100px;
}

.mt100 {
  margin-top: 100px;
}

.mr100 {
  margin-right: 100px;
}

.mb100 {
  margin-bottom: 1100px;
}

/*----------------------------------------------------
 #page
----------------------------------------------------*/
#page {
  width: 100%;
  margin: 0 auto;
  background-color: #d1cbba;
  min-height: 100%;
  position: relative;
  padding-bottom: 1px;
  /*-containerのmargin-bottomの相殺回避のため-*/
}
#page:before {
  content: "";
  width: 1640px;
  height: 100%;
  background-color: #d1cbba;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0;
  position: fixed;
  z-index: -1;
}

@media screen and (min-width: 1600px) {
  /*- $width_1600 以上 -*/
  #page:before {
    /*- #pageを見た目上で広げてキツキツにならないようにする-*/
    content: "";
    width: 1640px;
    height: 100%;
    background-color: #d1cbba;
    /*-センター合わせ横のみ-*/
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0;
    position: fixed;
    z-index: -1;
  }
}
/* ボタン */
/*-上下アニメーション-*/
@-webkit-keyframes next_anime {
  from {
    margin-top: -3px;
  }
  to {
    margin-top: 3px;
  }
}
@-moz-keyframes next_anime {
  from {
    margin-top: -3px;
  }
  to {
    margin-top: 3px;
  }
}
@keyframes next_anime {
  from {
    margin-top: -3px;
  }
  to {
    margin-top: 3px;
  }
}
/*-送りボタン-*/
.msg_btn_nav {
  /*-ベース-*/
  text-indent: 0;
  position: fixed;
  text-align: center;
  width: 512px;
  height: 176px;
  left: 50%;
  margin-left: -256px;
  bottom: 10px;
  z-index: 350;
  background-image: url(../img/page_next.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  -moz-background-size: 100% 295.45455%;
  -o-background-size: 100% 295.45455%;
  -webkit-background-size: 100% 295.45455%;
  background-size: 100% 295.45455%;
  opacity: 0.8;
}
@media screen and (max-width: 1126px) {
  .msg_btn_nav {
    /*-$width_1000以下 -*/
    left: calc(50% - 50px);
  }
}
@media screen and (max-width: 877px) {
  .msg_btn_nav {
    /*-$width_0900以下 -*/
    left: calc(50% + 75px);
  }
}
@media screen and (max-width: 640px) {
  .msg_btn_nav {
    /*-$width_0640以下 -*/
    left: 50%;
  }
}
.msg_btn_nav.scale06 {
  -moz-transform: scale(0.6, 0.6);
  -ms-transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transform: scale(0.6, 0.6);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.msg_btn_nav .msg_center_div,
.msg_btn_nav .audio_center_div,
.msg_btn_nav .note_msg {
  display: none;
}
.msg_btn_nav.note_on .note_msg {
  display: block;
}
.msg_btn_nav.msg_center_on .msg_btn_nav_inner, .msg_btn_nav.audio_center_on .msg_btn_nav_inner {
  display: none;
}
.msg_btn_nav.msg_center_on .msg_center_div {
  display: block;
}
.msg_btn_nav.audio_center_on .audio_center_div {
  display: block;
}

.msg_center_div_ {
  width: 32.8125%;
  height: 0;
  padding-bottom: 29.6875%;
  position: absolute;
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.msg_center_div_ button {
  background-color: transparent;
  border: 0;
  border-color: transparent;
  background-image: url(../img/page_next.png);
  height: 0;
}
.msg_center_div_ button.msg_up_btn, .msg_center_div_ button.msg_down_btn {
  width: 61.90476%;
  padding-bottom: 30.95238%;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -moz-background-size: 492.30769% 1000%;
  -o-background-size: 492.30769% 1000%;
  -webkit-background-size: 492.30769% 1000%;
  background-size: 492.30769% 1000%;
}
.msg_center_div_ button.msg_up_btn {
  top: 0;
  background-position: 59.31373% 75.21368%;
}
.msg_center_div_ button.msg_down_btn {
  bottom: 0;
  background-position: 59.31373% 86.32479%;
}
.msg_center_div_ button.msg_middle_btn {
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 98.80952%;
  padding-bottom: 28.57143%;
  -moz-background-size: 308.43373% 1083.33333%;
  -o-background-size: 308.43373% 1083.33333%;
  -webkit-background-size: 308.43373% 1083.33333%;
  background-size: 308.43373% 1083.33333%;
  background-position: 100% 74.57627%;
}
.msg_center_div_ button:hover {
  opacity: 0.65;
}

.msg_btn_nav_inner,
.msg_center_div,
.audio_center_div {
  width: 100%;
  height: 0;
  padding-bottom: 14%;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn),
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn),
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn) {
  margin: 0;
  margin-top: 0.2%;
  padding: 0;
  width: 27.54902%;
  height: 0;
  padding-top: 13.71373%;
  border: 0;
  position: absolute;
  background-color: transparent;
  background-color: #9cd743;
  border-radius: 6% / 12%;
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn):before,
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):before,
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #83be29;
  border: 1px solid #ccc;
  z-index: -1;
  border-radius: 6% / 12%;
  margin-bottom: -4%;
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn):after,
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):after,
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../img/page_next_side.png);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -moz-background-size: 200% 700%;
  -o-background-size: 200% 700%;
  -webkit-background-size: 200% 700%;
  background-size: 200% 700%;
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn):hover,
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover,
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover {
  opacity: 0.65;
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn):hover:before,
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover:before,
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover:before {
  border-color: #74a924;
}
.msg_btn_nav_inner button:not(.msg_middle_btn):not(.audio_middle_btn):hover:after,
.msg_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover:after,
.audio_center_div button:not(.msg_middle_btn):not(.audio_middle_btn):hover:after {
  opacity: 0.5;
}

.msg_btn_nav_inner button:first-of-type {
  left: 1.5%;
}
.msg_btn_nav_inner button:first-of-type.s0:after {
  background-position: 0 0;
}
.msg_btn_nav_inner button:first-of-type.s1:after {
  background-position: 0 16.66667%;
}
.msg_btn_nav_inner button:first-of-type.s2:after {
  background-position: 0 33.33333%;
}
.msg_btn_nav_inner button:first-of-type.s3:after {
  background-position: 0 50%;
}
.msg_btn_nav_inner button:last-of-type {
  right: 1.5%;
}
.msg_btn_nav_inner button:last-of-type.s0:after {
  background-position: 100% 0;
}
.msg_btn_nav_inner button:last-of-type.s1:after {
  background-position: 100% 16.66667%;
}
.msg_btn_nav_inner button:last-of-type.s2:after {
  background-position: 100% 33.33333%;
}

.msg_up_btn,
.vol_down_btn {
  left: 1.5%;
}

.msg_up_btn:after {
  background-position: 0 66.66667%;
}

.vol_down_btn:after {
  background-position: 0 83.33333%;
}

.msg_middle_btn,
.audio_middle_btn {
  border: none;
  background-color: transparent;
}
.msg_middle_btn:before,
.audio_middle_btn:before {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-image: url(../img/page_next_side.png);
  width: 85%;
  height: 0;
  padding-top: 44.29577%;
  top: 26%;
  left: 8%;
  -moz-background-size: 200% 700%;
  -o-background-size: 200% 700%;
  -webkit-background-size: 200% 700%;
  background-size: 200% 700%;
}

.msg_middle_btn:before {
  background-position: 100% 50%;
}

.audio_middle_btn:before {
  background-position: 0 100%;
}

.msg_down_btn,
.vol_up_btn {
  right: 1.5%;
}

.msg_down_btn:after {
  background-position: 100% 66.66667%;
}

.vol_up_btn:after {
  background-position: 100% 83.33333%;
}

.vol_up_btn.gray_b,
.vol_down_btn.gray_b {
  display: none;
}

.next_btn,
.msg_middle_btn,
.audio_middle_btn {
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 31.25%;
  height: 0;
  padding-bottom: 28.125%;
  background-image: url(../img/page_next.png);
  -moz-background-size: 320% 361.11111%;
  -o-background-size: 320% 361.11111%;
  -webkit-background-size: 320% 361.11111%;
  background-size: 320% 361.11111%;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-position: 0 93.61702%;
}
.next_btn:hover,
.msg_middle_btn:hover,
.audio_middle_btn:hover {
  opacity: 0.65;
}

.next_btn {
  font-size: 90%;
  text-shadow: -1px -1px 0px #fff;
  cursor: pointer;
  display: inline-block;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
}
.next_btn span {
  display: block;
  width: 100%;
  height: 82px;
  position: relative;
  top: 10px;
  -animation-duration: 900ms;
  -animation-name: next_anime;
  -animation-iteration-count: infinite;
  -webkit-animation-duration: 900ms;
  -webkit-animation-name: next_anime;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 900ms;
  -moz-animation-name: next_anime;
  -moz-animation-iteration-count: infinite;
}
.next_btn span:after {
  content: "";
  display: block;
  position: absolute;
  width: 51.25%;
  height: 0;
  padding-bottom: 51.25%;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-image: url(../img/page_next.png);
  background-repeat: no-repeat;
  -moz-background-size: 624.39024% 634.14634%;
  -o-background-size: 624.39024% 634.14634%;
  -webkit-background-size: 624.39024% 634.14634%;
  background-size: 624.39024% 634.14634%;
  background-position: 37.2093% 80.3653%;
}

.note_on .msg_btn_nav_inner > *,
.note_on .msg_center_div > *,
.note_on .audio_center_div > * {
  display: none;
}

.note_msg span {
  background-image: url(../img/page_next.png);
  background-repeat: no-repeat;
  height: 0;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 32.42188%;
  padding-bottom: 23.4375%;
  -moz-background-size: 308.43373% 433.33333%;
  -o-background-size: 308.43373% 433.33333%;
  -webkit-background-size: 308.43373% 433.33333%;
  background-size: 308.43373% 433.33333%;
  background-position: 100% 100%;
}

.msg_selmenu {
  background-image: url(../img/page_next_msg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 0;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 32.42188%;
  padding-bottom: 23.4375%;
  z-index: 6;
}

@media screen and (max-width: 1126px) {
  /*-$width_1000以下 ボタンの数-*/
  /*-送りボタン-*/
  .msg_btn_nav {
    width: 409.6px;
    height: 140.8px;
    margin-left: -204.8px;
  }

  .next_btn span {
    top: 5px;
  }
}
@media screen and (max-width: 640px) {
  /*-$width_0640以下 ボタンの数-*/
  /*-送りボタン-*/
  .msg_btn_nav {
    width: 341.33333px;
    height: 117.33333px;
    margin-left: -170.66667px;
  }

  .next_btn span {
    top: 0px;
  }
}
@media screen and (max-width: 380px) {
  /*-$width_0380以下 ボタンの数-*/
  /*-送りボタン-*/
  .msg_btn_nav {
    width: 256px;
    height: 88px;
    margin-left: -128px;
  }

  .next_btn span {
    top: -2px;
  }
}
/*----------------------------------------------------
 header
----------------------------------------------------*/
header {
  position: relative;
  z-index: 2;
  background-color: #ebfbcf;
  min-height: 48px;
}
header:after {
  /*-float解除用-*/
  content: " ";
  display: block;
  clear: both;
}

.header_logo {
  text-align: center;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /*-文字を見えなくする-*/
  background-image: url(../img/header_logo.png);
  background-repeat: no-repeat;
  background-position: top left;
  -moz-background-size: 222px 45px;
  -o-background-size: 222px 45px;
  -webkit-background-size: 222px 45px;
  background-size: 222px 45px;
}
.header_logo:before {
  /*-背景ボーダー用マスク-*/
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0 8px 12px;
  border-color: transparent transparent #f4ffde transparent;
}
.header_logo:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 48px;
  top: 0;
  margin-bottom: 9px;
  background-image: url(../img/header_bg.png);
  background-repeat: repeat-x;
  background-position: top;
  -moz-background-size: 6px 48px;
  -o-background-size: 6px 48px;
  -webkit-background-size: 6px 48px;
  background-size: 6px 48px;
  z-index: -1;
}

.header_menu {
  display: inline-block;
  float: right;
  margin-right: 10px;
}
.header_menu > button {
  margin-left: 5px;
  margin-top: 7px;
}

.header_menu0 > button {
  /*-ヘッダーボタン基本-*/
  min-width: 90px;
  height: 38px;
  display: inline-block;
  vertical-align: top;
  border-radius: 8px;
  border: 1px solid #a3d52f;
  border-bottom: 2px solid #97c828;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGQzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2YzkyMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9dd31), color-stop(100%, #96c921));
  background-image: -moz-linear-gradient(top, #a9dd31, #96c921);
  background-image: -webkit-linear-gradient(top, #a9dd31, #96c921);
  background-image: linear-gradient(to bottom, #a9dd31, #96c921);
  color: #fff;
  margin: 3px;
  outline: none;
  text-align: center;
  position: relative;
  /*-基本ボタンアクション(透明有効)-*/
}
.header_menu0 > button:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}
.header_menu0 > button:active {
  /*-クリックで2px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}
.header_menu0 > button p {
  font-weight: bold;
  display: inline-block;
}
.header_menu0 > button:after {
  /*-白枠-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px 3px;
  border-color: #fff;
}
.header_menu0 > button span {
  font-size: 80%;
}
.header_menu0 > button span:before {
  /*-改行-*/
  content: "\A";
  white-space: pre;
}

.player_setting {
  /*-iframe表示のときのプレイヤーサイズ-*/
  width: 97.8%;
  position: absolute;
  bottom: 5%;
  background-color: #d6edaf;
  margin: 0 0 0 1%;
  padding: 3px;
  border-radius: 6px;
}
.player_setting > div {
  text-align: right;
  letter-spacing: -.4em;
  /* 文字間を詰めて隙間をなくす */
}
.player_setting .normal_b_div button {
  padding: 6px 10px;
  margin: 2px;
  margin-left: 8px;
  min-height: inherit;
  min-width: 60px;
  letter-spacing: normal;
  /* 文字間を元に戻す */
}
.player_setting .normal_b_div button.select {
  background-color: #fff;
  border-bottom: none;
  border: 1px solid #eee;
  color: #94c327;
  text-shadow: none;
  cursor: auto;
}
.player_setting .normal_b_div button.select:hover, .player_setting .normal_b_div button.select:active {
  opacity: 1;
}
.player_setting p {
  position: absolute;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 16px;
}

.login_btn,
.logout_btn,
.reload_btn,
.charge_btn,
.sound_btn,
.setting_btn,
.twitter_btn,
.fullscreen_btn,
.text_btn,
.urlcopy_btn {
  height: 38px;
  min-width: 110px;
  padding-left: 38px;
  display: inline-block;
  vertical-align: top;
  border-radius: 8px;
  border: 1px solid #a3d52f;
  border-bottom: 2px solid #97c828;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGQzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2YzkyMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9dd31), color-stop(100%, #96c921));
  background-image: -moz-linear-gradient(top, #a9dd31, #96c921);
  background-image: -webkit-linear-gradient(top, #a9dd31, #96c921);
  background-image: linear-gradient(to bottom, #a9dd31, #96c921);
  color: #fff;
  margin: 3px;
  outline: none;
  text-align: center;
  line-height: 1em;
  position: relative;
  /*-基本ボタンアクション(透明有効)-*/
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.login_btn:hover,
.logout_btn:hover,
.reload_btn:hover,
.charge_btn:hover,
.sound_btn:hover,
.setting_btn:hover,
.twitter_btn:hover,
.fullscreen_btn:hover,
.text_btn:hover,
.urlcopy_btn:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}
.login_btn:active,
.logout_btn:active,
.reload_btn:active,
.charge_btn:active,
.sound_btn:active,
.setting_btn:active,
.twitter_btn:active,
.fullscreen_btn:active,
.text_btn:active,
.urlcopy_btn:active {
  /*-クリックで2px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}
.login_btn p,
.logout_btn p,
.reload_btn p,
.charge_btn p,
.sound_btn p,
.setting_btn p,
.twitter_btn p,
.fullscreen_btn p,
.text_btn p,
.urlcopy_btn p {
  font-weight: bold;
  display: inline-block;
}
.login_btn:after,
.logout_btn:after,
.reload_btn:after,
.charge_btn:after,
.sound_btn:after,
.setting_btn:after,
.twitter_btn:after,
.fullscreen_btn:after,
.text_btn:after,
.urlcopy_btn:after {
  /*-白枠-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px 3px;
  border-color: #fff;
}
.login_btn:before,
.logout_btn:before,
.reload_btn:before,
.charge_btn:before,
.sound_btn:before,
.setting_btn:before,
.twitter_btn:before,
.fullscreen_btn:before,
.text_btn:before,
.urlcopy_btn:before {
  /*-アイコンスペース-*/
  content: "";
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
  left: 3px;
  top: 0;
  background-image: url(../img/header_button_icon5.png);
  background-repeat: no-repeat;
  -moz-background-size: 36px 432px;
  -o-background-size: 36px 432px;
  -webkit-background-size: 36px 432px;
  background-size: 36px 432px;
}
.login_btn span,
.logout_btn span,
.reload_btn span,
.charge_btn span,
.sound_btn span,
.setting_btn span,
.twitter_btn span,
.fullscreen_btn span,
.text_btn span,
.urlcopy_btn span {
  font-size: 80%;
}
.login_btn span:before,
.logout_btn span:before,
.reload_btn span:before,
.charge_btn span:before,
.sound_btn span:before,
.setting_btn span:before,
.twitter_btn span:before,
.fullscreen_btn span:before,
.text_btn span:before,
.urlcopy_btn span:before {
  /*-改行-*/
  content: "\A";
  white-space: pre;
}
.login_btn.gray_b,
.logout_btn.gray_b,
.reload_btn.gray_b,
.charge_btn.gray_b,
.sound_btn.gray_b,
.setting_btn.gray_b,
.twitter_btn.gray_b,
.fullscreen_btn.gray_b,
.text_btn.gray_b,
.urlcopy_btn.gray_b {
  border-color: #ccc;
  border-bottom-color: #bfbfbf;
  background: #ccc;
  /*-基本ボタンアクション(透明有効)(灰色ボタン)-*/
}
.login_btn.gray_b:hover,
.logout_btn.gray_b:hover,
.reload_btn.gray_b:hover,
.charge_btn.gray_b:hover,
.sound_btn.gray_b:hover,
.setting_btn.gray_b:hover,
.twitter_btn.gray_b:hover,
.fullscreen_btn.gray_b:hover,
.text_btn.gray_b:hover,
.urlcopy_btn.gray_b:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.login_btn.gray_b:active,
.logout_btn.gray_b:active,
.reload_btn.gray_b:active,
.charge_btn.gray_b:active,
.sound_btn.gray_b:active,
.setting_btn.gray_b:active,
.twitter_btn.gray_b:active,
.fullscreen_btn.gray_b:active,
.text_btn.gray_b:active,
.urlcopy_btn.gray_b:active {
  /*-クリックで2px下がる処理-*/
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.reload_btn {
  /*-リロードアイコン-*/
}
.reload_btn:before {
  background-position: 0 -0px;
}

.logout_btn {
  /*-ログアウトアイコン-*/
}
.logout_btn:before {
  left: 5px;
  background-position: 0 -36px;
}

.login_btn {
  /*-ログインアイコン-*/
}
.login_btn:before {
  left: 5px;
  background-position: 0 -108px;
}

.charge_btn {
  /*-チャージアイコン-*/
  min-width: 100px;
}
.charge_btn:before {
  background-position: 0 -72px;
}

.setting_btn {
  /*-設定ボタン-*/
  min-width: 80px;
}
.setting_btn:before {
  background-position: 0 -252px;
}

.twitter_btn {
  /*-twitterアイコン-*/
  width: 60px;
  min-width: 60px;
  padding-left: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYzlmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjYmJmNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7dc9f8), color-stop(100%, #5cbbf6));
  background-image: -moz-linear-gradient(top, #7dc9f8, #5cbbf6);
  background-image: -webkit-linear-gradient(top, #7dc9f8, #5cbbf6);
  background-image: linear-gradient(to bottom, #7dc9f8, #5cbbf6);
  border-color: #8ccff8;
  border-bottom-color: #74c5f7;
}
.twitter_btn p {
  display: none;
  position: absolute;
}
.twitter_btn:before {
  content: "";
  left: 10px;
  top: 1px;
  background-size: 100% 100%;
  background-image: url(../img/header_button_icon_twitter.png);
}

.fullscreen_btn {
  /*-フルスクリーンボタン-*/
  width: 60px;
  min-width: 60px;
  padding-left: 0;
}
.fullscreen_btn.off_btn:before {
  background-position: 0 -324px;
}
.fullscreen_btn:before {
  background-position: 0 -288px;
  left: 19%;
}
.fullscreen_btn p {
  display: none;
  position: absolute;
}

.sound_btn {
  /*-サウンドアイコン-*/
  width: 60px;
  min-width: 60px;
  padding-left: 0;
}
.sound_btn:before {
  /*-アイコンスペース-*/
  content: "";
  left: 10px;
  top: 1px;
  background-position: 0 -144px;
}
.sound_btn p {
  display: none;
  position: absolute;
}
.sound_btn.sound_off {
  background: #c5cfad;
  border-color: #c5cfad;
}
.sound_btn.sound_off:before {
  background-position: 0 -180px;
}

.text_btn {
  min-width: 10px;
  padding: 0 5px;
  font-size: 98%;
  line-height: 1.1em;
}
.text_btn::before {
  display: none;
  background-color: #f00;
}

.urlcopy_btn {
  /*-urlcopyアイコン-*/
}
.urlcopy_btn:before {
  background-position: 0 -360px;
}

@media screen and (max-width: 640px) {
  /*-$width_0640以下 ボタンの数-*/
  header {
    background-color: #ebfbcf;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyMy4yNTU4MSUiIHN0b3AtY29sb3I9IiNmMWZmZGEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlY2ZjZDEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 43, color-stop(23.25581%, #f1ffda), color-stop(100%, #ecfcd1));
    background-image: -moz-linear-gradient(top, #f1ffda 10px, #ecfcd1 43px);
    background-image: -webkit-linear-gradient(top, #f1ffda 10px, #ecfcd1 43px);
    background-image: linear-gradient(to bottom, #f1ffda 10px, #ecfcd1 43px);
  }

  .header_logo {
    width: 100%;
    height: 50px;
    background-image: url(../img/header_logo_s.png);
    -moz-background-size: 160px 43px;
    -o-background-size: 160px 43px;
    -webkit-background-size: 160px 43px;
    background-size: 160px 43px;
  }
  .header_logo:after {
    background-image: url(../img/header_bg_s.png);
    -moz-background-size: 3px 48px;
    -o-background-size: 3px 48px;
    -webkit-background-size: 3px 48px;
    background-size: 3px 48px;
    background-repeat: repeat-x;
    height: 10px;
  }

  .header_login,
  .header_logout {
    margin-right: -67px;
    font-size: 90%;
    width: 76px;
    height: 35px;
    margin-top: 8px;
  }

  .header_menu {
    right: 0;
    letter-spacing: -0.4em;
  }
  .header_menu > * {
    margin-left: 0;
    letter-spacing: normal;
  }

  .header_reload {
    -moz-transform: scale(0.7, 0.7);
    -ms-transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }

  .logout_btn,
  .login_btn,
  .reload_btn,
  .charge_btn,
  .setting_btn,
  .text_btn {
    width: 60px;
    min-width: 60px;
    padding-left: 0;
  }
  .logout_btn:before,
  .login_btn:before,
  .reload_btn:before,
  .charge_btn:before,
  .setting_btn:before,
  .text_btn:before {
    /*-アイコンスペース-*/
    content: "";
    left: 10px;
    top: 1px;
  }
  .logout_btn span:before,
  .login_btn span:before,
  .reload_btn span:before,
  .charge_btn span:before,
  .setting_btn span:before,
  .text_btn span:before {
    /*-改行-*/
    content: "";
    white-space: normal;
  }

  .text_btn {
    font-size: 90%;
  }

  .logout_btn p,
  .login_btn p,
  .reload_btn p,
  .charge_btn p {
    display: none;
    position: absolute;
  }
}
@media screen and (max-width: 450px) {
  /*-$width_0450以下 ボタンの数-*/
  .header_button {
    /*-ヘッダーボタン+アイコンのみ表示-*/
  }
  .header_button.icon_logout, .header_button.icon_reload {
    width: 60px;
    min-width: 60px;
    padding-left: 0;
  }
  .header_button.icon_logout:before, .header_button.icon_reload:before {
    /*-アイコンスペース-*/
    content: "";
    left: 10px;
    top: 1px;
  }
  .header_button.icon_logout p, .header_button.icon_reload p {
    display: none;
    position: absolute;
  }
  .header_button.icon_logout span:before, .header_button.icon_reload span:before {
    /*-改行-*/
    content: "";
    white-space: normal;
  }
}
/*----------------------------------------------------
 footer
----------------------------------------------------*/
footer.global {
  padding: 0;
  background: #72c333;
  color: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 56px;
}
footer.global.footer_menu {
  height: 30px;
}

footer.global p.copyright {
  margin: 0;
  text-align: center;
}

/*-『.contents img 』コメントアウト-*/
/*-フッターリンク-*/
.footer_link {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  margin-bottom: 3px;
}

.footer_link > .footer_link_ul {
  letter-spacing: -.40em;
}

.footer_link_ul {
  margin: 0 auto;
  width: 98%;
  max-width: 600px;
  text-align: center;
  display: block;
}
.footer_link_ul br {
  display: none;
}
.footer_link_ul li {
  display: inline-block;
  padding: 0;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  letter-spacing: normal;
  /*-ボーダーの分だけ左に移動-*/
  margin-left: -1px;
}
.footer_link_ul li a {
  display: block;
  padding: 0 6px;
  margin: 0;
  cursor: pointer;
}
.footer_link_ul li a:link, .footer_link_ul li a:visited {
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.footer_link_ul li a:hover {
  text-decoration: underline;
}

/*-フッターメニュー化-*/
.footer_menu .footer_label {
  display: block;
}
.footer_menu input[type="checkbox"].footer_check {
  display: none;
}
.footer_menu input[type="checkbox"].footer_check + .footer_link {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.footer_menu input[type="checkbox"].footer_check + .footer_link .footer_label {
  right: 0;
  top: 0;
}
.footer_menu input[type="checkbox"].footer_check + .footer_link .footer_link_ul {
  display: none;
}
.footer_menu input[type="checkbox"].footer_check + .footer_link + .copyright {
  width: 100%;
  line-height: 1.2em;
  display: table;
  height: 30px;
}
.footer_menu input[type="checkbox"].footer_check + .footer_link + .copyright small {
  display: table-cell;
  vertical-align: middle;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link {
  display: block;
  background-color: #f00;
  position: absolute;
  width: inherit;
  max-width: inherit;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_label {
  width: 30px;
  height: 30px;
  right: 0;
  top: 0px;
  background-position: 0 100%;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul {
  width: inherit;
  padding: 0px;
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 100%;
  z-index: 500;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li {
  display: block;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  margin: 0;
  background-color: #5fa32b;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li:last-of-type {
  border-color: transparent;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li:first-of-type {
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li a {
  padding: 10px 20px;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li a:hover {
  background-color: #4c8222;
}
.footer_menu input[type="checkbox"].footer_check:checked + .footer_link .footer_link_ul li a:active {
  background-color: #72c333;
}

.footer_label {
  width: 30px;
  height: 30px;
  background-color: #fcc;
  background-image: url(../img/hamburger_menu_icon.png);
  background-repeat: no-repeat;
  -moz-background-size: 100% 200%;
  -o-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
  background-position: 0 0;
  position: absolute;
  background-color: #66af2e;
  cursor: pointer;
}

.footer_label,
.footer_check {
  display: none;
}

@media screen and (max-width: 620px) {
  /*-620x以下-*/
  footer.global {
    height: 88px;
  }
  footer.global.footer_menu {
    margin-top: 58px;
  }

  .footer_link_ul br:nth-of-type(2) {
    display: inline;
  }
  .footer_link_ul li {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .footer_menu .footer_link_ul br:nth-of-type(2) {
    display: none;
  }
  .footer_menu .footer_link_ul li {
    margin: inherit;
  }
}
@media screen and (max-width: 360px) {
  /*-360x以下-*/
  footer.global {
    height: 112px;
  }
  footer.global.footer_menu {
    margin-top: 82px;
  }

  .footer_link_ul br:nth-of-type(1) {
    display: inline;
  }

  .footer_menu .footer_link_ul br:nth-of-type(1) {
    display: none;
  }
}
/*-テストフレーム-*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.dummy_box {
  /*-中身用のダミースペース-*/
  height: 600px;
  background-color: rgba(255, 255, 255, 0.5);
  width: 50px;
  margin: 0 auto;
}
.dummy_box:after {
  content: "50x600";
  display: block;
}

@media screen and (max-width: 800px) {
  .dummy_box {
    /*-中身用のダミースペース-*/
    height: 100px;
    width: 60px;
    margin: 0;
  }
  .dummy_box:after {
    content: "100x100";
  }
}
/*-最大サイズ-*/
#page {
  max-width: 1600px;
}

/*-スピーカー-*/
.information_area2 {
  margin-left: 5px;
  margin-right: 5px;
  text-align: left;
  height: 18px;
  background-color: #5c5644;
  overflow: hidden;
  position: relative;
}
.information_area2 > button {
  width: 20px;
  height: 15px;
  border: none;
  background-image: url(../img/icon_information.png);
  background-repeat: no-repeat;
  -moz-background-size: 15px 60px;
  -o-background-size: 15px 60px;
  -webkit-background-size: 15px 60px;
  background-size: 15px 60px;
  background-color: #b7550a;
  display: inline-block;
  vertical-align: middle;
}
.information_area2 > button:before {
  content: "";
  display: block;
  position: absolute;
  opacity: 0.5;
}
.information_area2 > button:hover:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #b7550a;
}

/*-テキストスクロールアニメーション-*/
.info_msg {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  height: 18px;
  margin: 0;
  position: absolute;
  white-space: nowrap;
  /*- 2022.03.17追加 -*/
  width: 100%;
  overflow: hidden;
}
.info_msg > span,
.info_msg > a {
  white-space: nowrap;
}

.info_speaker {
  background-position: 2px 0px;
}
.info_speaker.speaker_off, .info_speaker.speaker_off:hover {
  background-position: 2px -15px;
  background-color: #5c5644;
  cursor: auto;
}
.info_speaker.speaker_off:before, .info_speaker.speaker_off:hover:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #5c5644;
}
.info_speaker + .info_msg {
  width: calc(100% - 36px);
}

.info_chime {
  background-position: 2px -30px;
}
.info_chime.chime_off, .info_chime.chime_off:hover {
  background-position: 2px -45px;
  background-color: transparent;
  opacity: 0.7;
  cursor: auto;
}

.container {
  /*-ヘッダーとのスペースを空ける-*/
  margin-top: 8px;
  /*-フッターをposition: absolute;にするのでその分の下margin-*/
  margin-bottom: 63px;
}
@media screen and (max-width: 877px) {
  .container {
    /*- $width_0900main 以下-*/
    margin-top: 12px;
  }
}
@media screen and (max-width: 620px) {
  .container {
    /*-620px以下-*/
    margin-bottom: 95px;
  }
}
@media screen and (max-width: 360px) {
  .container {
    /*-360px以下-*/
    margin-bottom: 119px;
  }
}

.contents {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
}
.contents:before {
  /*-sub_areaが入ってくるスペースの確保用-*/
  content: "";
  display: block;
  width: 250px;
  /*-sub_areaよりコンテンツが短い時にフッターがめり込む問題を対処-*/
  min-height: 1600px;
}

.contents_inner {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: auto;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /*-これがないと放送で長い文字列の時に横幅が広がる-*/
  max-width: calc(100% - 500px);
}

.main_area {
  position: relative;
  float: right;
  width: 100%;
  text-align: center;
}

.sub_wraper {
  width: 100%;
}

.info_area_wraper {
  /*-サイドメニュー-*/
  width: 250px;
  height: auto;
  margin-left: -250px;
  position: absolute;
  top: 0;
}

.sub_area_wraper {
  float: right;
  width: 100%;
  text-align: left;
  margin-top: 5px;
}

.sub_area {
  min-height: 200px;
  min-width: 450px;
  width: calc(100% - 10px);
  margin: 0 auto;
  margin-bottom: 8px;
  padding-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.55);
  /*-2020.04.21 黒半透明化-*/
  position: relative;
  /*- これでここで位置を指定できる-*/
}
.sub_area.hidden_div {
  margin-bottom: 0;
  padding-bottom: 0;
}

.other_area {
  /*-右サイドバー-*/
  width: 250px;
  position: relative;
  margin-top: 0;
  margin-bottom: 5px;
  /*-『.contents .other_area img 』コメントアウト-*/
}

.other_area_wraper {
  /*-外周-*/
  position: relative;
  border-radius: 10px;
  background-color: #c9ea84;
  border: 1px solid #adda90;
  text-align: center;
  margin-bottom: 10px;
}
.other_area_wraper:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background-color: #effad7;
  border-radius: 10px;
  z-index: 0;
}
.other_area_wraper:after {
  /*-ベース-*/
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 20px;
  z-index: 1;
}

/*-iframe用 <!-- 2017.11.20 iframe埋め込み追加 --> -*/
.other_area_iframe_wrapper {
  border-radius: 5px;
  border: 1px solid #72a300;
  overflow: hidden;
  min-height: 170px;
  min-width: 250px;
}
.other_area_iframe_wrapper.floating_window {
  border-color: rgba(255, 255, 255, 0.7);
}
.other_area_iframe_wrapper.ctrl_set .other_area_iframe {
  border-radius: 0;
  border-bottom: 1px solid #bfbfbf;
  height: 214px;
}
.other_area_iframe_wrapper.ctrl_set.floating_window .controller.miniset.semi_transparent {
  background-color: rgba(51, 51, 51, 0.6);
}
.other_area_iframe_wrapper:not(.floating_window) .other_area_iframe {
  width: 100% !important;
}
.other_area_iframe_wrapper.event_iframe {
  min-height: 348px;
}
.other_area_iframe_wrapper.event_iframe .other_area_iframe {
  min-height: 320px;
  /*-ヘッダー分引く-*/
}

.top_area .other_area_iframe_wrapper {
  min-width: inherit;
}
.top_area .other_area_iframe_wrapper.event_iframe {
  min-height: 0;
}

.other_area_iframe {
  padding: 0;
  min-height: 142px;
  resize: vertical;
  overflow-x: scroll;
  position: relative;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
}
.other_area_iframe iframe {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 142px;
}

.floating_window .other_area_iframe {
  min-width: 250px;
  min-height: 250px;
  resize: both;
}

.notice_area {
  min-height: inherit !important;
  padding: 0 !important;
  border-radius: 8px;
}
.notice_area .sub_area_inner {
  padding: 0 !important;
  overflow: hidden;
  /*-marginの相殺を避けるため-*/
}
.notice_area .sub_area_inner > div {
  margin: 10px;
}
.notice_area.hidden_div .sub_area_inner {
  overflow: inherit;
  /*-marginの相殺をわざと有効にする-*/
}
.notice_area.hidden_div .sub_area_inner > div {
  margin: 0 10px;
  padding-top: 1px;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.sub_area_inner {
  padding: 8px;
}

.out_side_l,
.out_side_r {
  /*-外に出す用-*/
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  /*-外周-*/
  position: relative;
  border-radius: 10px;
  background-color: #c9ea84;
  border: 1px solid #adda90;
  text-align: center;
}
.out_side_l:before,
.out_side_r:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background-color: #effad7;
  border-radius: 10px;
  z-index: 0;
}
.out_side_l:after,
.out_side_r:after {
  /*-ベース-*/
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 20px;
  z-index: 1;
}
.out_side_l.hide_outline,
.out_side_r.hide_outline {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  border-width: inherit;
}
.out_side_l.hide_outline:before,
.out_side_r.hide_outline:before {
  display: none;
}
.out_side_l.hide_outline:after,
.out_side_r.hide_outline:after {
  display: none;
}

#page {
  width: 100%;
}

@media screen and (max-width: 1126px) {
  /*- $width_1000以下-*/
  .sub_contents {
    /*-吹き出し用-*/
    position: relative;
    width: 100%;
  }

  .contents:before {
    /*-sub_areaが入ってくるスペースの確保用-*/
    display: none;
  }

  .contents_inner {
    /*-これがないと放送で長い文字列の時に横幅が広がる-*/
    max-width: calc(100% - 250px);
  }

  .main_area {
    float: none;
  }

  .sub_wraper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
  }

  .info_area_wraper {
    margin-left: 0;
    width: 150px;
    /*-メッセージエリア分-*/
    position: static;
  }

  .info_area img {
    width: auto;
    height: auto;
  }

  .sub_area_wraper {
    float: none;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 100%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .other_area {
    width: 250px;
  }

  .out_side_l {
    height: auto;
    margin-bottom: 7px;
  }

  .ad_banner_left {
    display: none;
  }
}
@media screen and (max-width: 877px) {
  /*- $width_0900main以下-*/
  .contents {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .contents_inner {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    -ms-flex: none;
    /*-これを付けてるとIE10で表示がおかしくなるので無効にする-*/
    /*- 横幅の制限を解除 -*/
    max-width: inherit;
  }

  .other_area {
    width: 100%;
    height: 80px;
    height: 120px;
    margin-bottom: 5px;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    display: none;
    /*-プログラムでタブ表示するので非表示にする。-*/
  }

  .other_area_wraper {
    height: 120px;
    overflow: hidden;
    width: auto;
    margin-left: 155px;
  }

  .out_side_r {
    width: 150px;
    height: 120px;
    position: absolute;
  }
  .out_side_r img {
    width: 80% !important;
    height: auto !important;
  }
}
@media screen and (max-width: 640px) {
  /*- $width_0640 以下-*/
  .sub_contents {
    /*-吹き出し用-*/
  }

  .sub_area_inner {
    padding: 8px 3px;
  }

  .main_area {
    font-size: 120%;
    line-height: 1.2em;
  }
  .main_area .timer_wrpper {
    /*-main_areaで大きくしたfont-sizeをタイマーへの影響を打ち消す-*/
    font-size: 83.33333%;
  }
  .main_area .main_button {
    font-size: 130%;
    letter-spacing: 0.05em;
    line-height: 1.4em;
  }

  .sub_wraper {
    display: block;
  }

  .info_area_wraper {
    width: 100%;
    display: none;
    /*-プログラムでタブ表示するので非表示にする。-*/
  }

  .sub_area {
    /*-メッセージエリア分打ち消し-*/
    margin-top: 0px;
    width: 100%;
    min-width: inherit;
  }
}
/*-移動パネル-*/
.controller {
  /*-外線-*/
  /*-外周-*/
  position: relative;
  border-radius: 10px;
  background-color: #c9ea84;
  border: 1px solid #adda90;
  min-height: 100px;
  border-radius: 10px 10px 0 0;
  text-align: left;
  margin: 0 5px;
  position: relative;
  z-index: 10;
}
.controller:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background-color: #effad7;
  border-radius: 10px;
  z-index: 0;
}
.controller:after {
  /*-ベース-*/
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 20px;
  z-index: 1;
}
.controller.miniset {
  /*-サイドバー用の縮小版-*/
  padding: 6px 17px;
  border-radius: 8px;
  margin: 0;
  display: inline-block;
}
.controller.miniset > div {
  display: block;
}
.controller.miniset .hide_controller {
  /*-同行用-*/
  border-radius: 10px;
}
.controller.miniset div[class^="ctrl_side_button"] {
  /*-前方一致class名-*/
  margin: 5px 0;
  display: block;
  width: auto;
  max-width: inherit;
  /*-IE11用-*/
  max-width: initial;
  /*-初期化-*/
  text-align: center;
}
.controller.miniset div[class^="ctrl_side_button"] > button {
  width: 100%;
  min-height: 24px;
  margin: 0;
}
.controller.miniset div[class^="ctrl_side_button"] > button ~ button {
  margin: 6px 0 0;
}
.controller.miniset .ctrl_direction_wrapper {
  /*- 古いAndroidやドルフィンブラウザで表示がはみ出るのでサイズ指定追加-*/
  width: 216px;
}
.controller.miniset .ctrl_direction_inner {
  padding-top: 80%;
  /*- 2016.10.18_miniset内でctrl_option_button3と重ならないスペースをあらかじめ確保 -*/
  margin: 18px 0;
}
.controller.miniset [class^="ctrl_option_button"] {
  /*-2018.10.12 前方一致へ変更(対象想定ctrl_option_button1,ctrl_option_button2,ctrl_option_button3)-*/
  width: 27%;
  height: 100%;
  margin-top: 0;
}
.controller.miniset .ctrl_option_button1 {
  margin-left: 1%;
}
.controller.miniset .ctrl_option_button2 {
  margin-right: 1%;
}
.controller.miniset .ctrl_direction2 {
  width: 78%;
  padding-bottom: 53.3%;
}
.controller .ctrl_direction_wrapper {
  position: relative;
  padding: 0;
  width: 300px;
}
.controller .ctrl_direction_wrapper:before {
  /*- 影 -*/
  display: none;
}
.controller .ctrl_direction_inner {
  height: 0;
  padding-top: 49.5%;
  position: relative;
  width: 100%;
}
.controller .ctrl_direction2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 60%;
  padding-bottom: 41%;
  z-index: 1;
}

/*-2018.10.17 .ctrl_option_button3追加-*/
.controller:not(.miniset) .ctrl_option_button3 {
  margin: 0;
  width: 18%;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0;
  height: 1px;
  z-index: 3;
}
.controller:not(.miniset) .ctrl_option_button3 > button {
  top: 0;
  bottom: 0;
  margin-top: 102%;
}
.controller:not(.miniset) .ctrl_option_button3 .ctrl_viewUp_btn {
  left: -240%;
}
.controller:not(.miniset) .ctrl_option_button3 .ctrl_viewDown_btn {
  left: 240%;
}
.controller.miniset .ctrl_option_button3 {
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 122%;
}
@media screen and (max-width: 1126px) {
  .controller.miniset .ctrl_option_button3 {
    /*- $width_1000 以下 ボタンの数-*/
    height: 116%;
  }
}

@media screen and (max-width: 1200px) {
  /*- $width_1200 以下 ボタンの数-*/
}
@media screen and (max-width: 1126px) {
  /*- $width_1000 以下 ボタンの数-*/
  .controller.miniset {
    /*-サイドバー用の縮小版-*/
    padding: 1px 9px;
    margin: 5px 0 0;
    width: 150px;
  }
  .controller.miniset:before {
    background-color: #fff;
  }
  .controller.miniset .ctrl_direction_wrapper {
    /*- 古いAndroidやドルフィンブラウザで表示がはみ出るのでサイズ指定追加-*/
    width: 130px;
  }
  .controller.miniset .ctrl_direction_inner {
    padding-top: 100%;
    /*- 2016.10.18_miniset内でctrl_option_button3と重ならないスペースをあらかじめ確保 -*/
    margin: 13px 0;
  }
  .controller.miniset [class^="ctrl_option_button"] {
    /*-2018.10.12 前方一致へ変更(対象想定ctrl_option_button1,ctrl_option_button2,ctrl_option_button3)-*/
    width: 30%;
  }
  .controller.miniset .ctrl_option_button1 {
    margin-left: -2%;
  }
  .controller.miniset .ctrl_option_button2 {
    margin-right: -2%;
  }
  .controller.miniset .ctrl_direction2 {
    width: 96%;
    padding-bottom: 65.6%;
  }
}
@media screen and (max-width: 720px) {
  /*- $width_0720 以下 ボタンの数-*/
  .ctrl_option_button1 {
    margin-left: 0;
  }

  .ctrl_option_button2 {
    margin-left: 0;
  }

  .controller .ctrl_side_button1,
  .controller .ctrl_side_button2 {
    margin-top: 5px;
  }
  .controller .ctrl_side_button1 {
    margin-right: 5px;
  }
  .controller .ctrl_side_button2 {
    margin-left: 5px;
  }
}
@media screen and (max-width: 640px) {
  /*- $width_0640 以下 ボタンの数-*/
}
/*-拡大縮小可能-*/
.ctrl_direction_wrapper {
  width: 35%;
  /*-移動ボタン全体大きさ制御-*/
  position: absolute;
  z-index: 30;
  /*-サブボタン用スペース-*/
  padding-left: 6%;
  padding-right: 6%;
}
.ctrl_direction_wrapper:before {
  /*-オプションボタン用黒背景-*/
  content: "";
  display: block;
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 10%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5% 5% 5% 5% / 10% 10% 10% 10%;
}

.ctrl_direction2 {
  /*-移動ボタン-*/
  width: 100%;
  height: 0;
  position: relative;
  padding-bottom: 69.73684%;
  /*-比率を保ったまま縮小-*/
}
.ctrl_direction2:before, .ctrl_direction2:after {
  /*-楕円座布団共通-*/
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
.ctrl_direction2.ctrl_octas {
  /*-通常表示のときは8方向パネル消す-*/
  display: none;
}
.ctrl_direction2:after {
  /*-楕円座布団-*/
  border-radius: 100% / 100%;
  z-index: 10;
  left: -1%;
  top: -1%;
  right: -1%;
  bottom: -1%;
  background-color: #f8f8f8;
}
.ctrl_direction2 button {
  /*-ボタン共通設定-*/
  /*-注）選択範囲のみのボタンで見えない-*/
  border: none;
  display: block;
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: 20;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  /*-文字がはみ出て反応するのを防ぐため-*/
  font-size: 1%;
  overflow: hidden;
}
.ctrl_direction2 button:hover + div {
  /*-半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}
.ctrl_direction2 button:active + div {
  /*-クリックで1px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.ctrl_direction2 button.gray_b {
  /*-非選択状態-*/
  display: none;
}

.ctrlMapL_img,
.ctrlMapR_img,
.ctrlMapF_img,
.ctrlMapB_img,
.ctrlMapRL_img {
  /*-div共通設定（画像部分）-*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /*-文字を見えなくする-*/
  background-image: url(../img/ctrl_move_b2.png);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 15;
}

.ctrlMapL_btn, .ctrlMapR_btn {
  /*-左右共通選択範囲-*/
  /*-ボタンこれは選択範囲だけの存在になる-*/
  width: 29%;
  top: 30%;
  bottom: 30%;
}

.ctrlMapL_img, .ctrlMapR_img {
  /*-左右共通 画像-*/
  -moz-background-size: 400% 271.69811%;
  -o-background-size: 400% 271.69811%;
  -webkit-background-size: 400% 271.69811%;
  background-size: 400% 271.69811%;
  width: 34.21053%;
  height: 67.92453%;
  /*-手動-*/
  top: 15.5%;
}

.ctrlMapL_btn {
  /*-左選択範囲-*/
  left: 1%;
  background-color: rgba(0, 255, 0, 0.5);
}

.ctrl_direction2:not(.ctrl_pers3D) .ctrlMapL_btn.rotate_btn + .ctrlMapL_img {
  /*-回転画像-*/
  /*-ctrl_pers3Dでないときに適用(not)2018.10-*/
  background-image: url(../img/ctrl_move_modea2.png);
}

.ctrlMapR_btn {
  /*-右選択範囲-*/
  right: 1%;
  background-color: rgba(0, 0, 255, 0.5);
}

.ctrl_direction2:not(.ctrl_pers3D) .ctrlMapR_btn.rotate_btn + .ctrlMapR_img {
  /*-回転画像-*/
  /*-ctrl_pers3Dでないときに適用(not)2018.10-*/
  background-image: url(../img/ctrl_move_modea2.png);
}

.ctrlMapL_img {
  /*-左選択範囲 画像-*/
  /*-手動-*/
  left: 1%;
  background-position: 0% 0%;
}

.gray_b + .ctrlMapL_img {
  /*-左選択範囲 非選択状態画像-*/
  background-position: 66.66667% 0%;
  opacity: 0.6;
}

.ctrlMapR_img {
  /*-右選択範囲 画像-*/
  /*-手動-*/
  right: 1%;
  background-position: 33.33333% 0%;
}

.gray_b + .ctrlMapR_img {
  /*-右選択範囲 非選択状態画像-*/
  background-position: 100% 0%;
  opacity: 0.6;
}

.ctrlMapF_btn, .ctrlMapB_btn {
  /*-上下共通選択範囲-*/
  /*-ボタンこれは選択範囲だけの存在になる-*/
  height: 29%;
  left: 30%;
  width: 40%;
}

.ctrlMapF_img, .ctrlMapB_img {
  /*-前後共通 画像-*/
  -moz-background-size: 208% 480%;
  -o-background-size: 208% 480%;
  -webkit-background-size: 208% 480%;
  background-size: 208% 480%;
  background-position: 0% 47.36842%;
  width: 65.78947%;
  height: 37.73585%;
  left: 17%;
}

.ctrlMapF_img {
  /*-前選択範囲 画像-*/
  top: -1%;
}

.gray_b + .ctrlMapF_img {
  /*-前選択範囲 非選択状態画像-*/
  background-position: 92.59259% 47.36842%;
  opacity: 0.6;
}

.ctrlMapB_img {
  /*-後選択範囲 画像-*/
  background-position: 0% 73.68421%;
  bottom: -1%;
}

.gray_b + .ctrlMapB_img {
  /*-後選択範囲 非選択状態画像-*/
  background-position: 92.59259% 73.68421%;
  opacity: 0.6;
}

.ctrlMapF_btn {
  /*-前選択範囲-*/
  top: 1%;
}

.ctrlMapB_btn {
  /*-後選択範囲-*/
  bottom: 1%;
}

.ctrlMapRL_btn {
  /*-リロード選択範囲-*/
  /*-ボタンこれは選択範囲だけの存在になる-*/
  width: 33%;
  height: 35%;
  left: 33.5%;
  top: 32%;
}

.ctrlMapRL_img {
  /*-リロード 画像-*/
  -moz-background-size: 433.33333% 480%;
  -o-background-size: 433.33333% 480%;
  -webkit-background-size: 433.33333% 480%;
  background-size: 433.33333% 480%;
  background-image: url(../img/ctrl_move_b2.png);
  background-position: 0% 100%;
  position: absolute;
  z-index: 15;
  width: 31.57895%;
  height: 37.73585%;
  top: 30.5%;
  left: 34%;
}

.gray_b + .ctrlMapRL_img {
  /*-リロード 非選択状態画像-*/
  background-position: 30% 100%;
  opacity: 0.6;
}

/*- コントローラ横左右オプションボタンdiv-*/
.ctrl_option_button1 {
  left: 0%;
}

.ctrl_option_button2 {
  right: 0%;
}

.controller:not(.miniset) .ctrl_option_button1 {
  left: 2%;
}
.controller:not(.miniset) .ctrl_option_button2 {
  right: 2%;
}

/*-2018.10.12 前方一致へ変更(対象想定ctrl_option_button1,ctrl_option_button2,ctrl_option_button3)-*/
.controller [class^="ctrl_option_button"] {
  width: 20%;
  height: 86%;
  margin-top: 4%;
  position: absolute;
  top: 0;
  z-index: inherit;
}

[class^="ctrl_option_button"] {
  width: 50px;
  margin-top: 0;
  position: relative;
  top: 0;
  z-index: inherit;
}
[class^="ctrl_option_button"] button {
  /*-ボタン共通設定-*/
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  display: block;
  position: absolute;
  z-index: 2;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  /*-文字を見えなくする-*/
  -moz-background-size: 1400% 200%;
  -o-background-size: 1400% 200%;
  -webkit-background-size: 1400% 200%;
  background-size: 1400% 200%;
  background-image: url(../img/ctrl_option_b6.png);
  background-position: 0% 0%;
  background-repeat: no-repeat;
  height: 0;
  width: 100%;
  padding-bottom: 73.33333%;
}
[class^="ctrl_option_button"] button:before {
  /*-アイコン共通-*/
  content: "";
  display: block;
  position: absolute;
  -moz-background-size: 1400% 200%;
  -o-background-size: 1400% 200%;
  -webkit-background-size: 1400% 200%;
  background-size: 1400% 200%;
  background-image: url(../img/ctrl_option_b6.png);
  background-repeat: no-repeat;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
[class^="ctrl_option_button"] button:not(.gray_b):hover {
  /*-半透明処理-*/
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
[class^="ctrl_option_button"] button:not(.gray_b):active {
  /*-クリックで1px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
[class^="ctrl_option_button"] button.gray_b {
  /*-ボタンの上のマークを半透明化-*/
  opacity: 0.8;
  background-position: 0% 100%;
}

button.ctrl_expand {
  /*-拡大-*/
  right: 0;
  bottom: 1%;
}
button.ctrl_expand:before {
  background-position: 38.46% 0%;
}
button.ctrl_expand.gray_b:before {
  /*-非選択時-*/
  background-position: 38.46154% 100%;
}
button.ctrl_contract {
  /*-縮小-*/
  right: 0;
  bottom: 1%;
}
button.ctrl_contract:before {
  background-position: 46.15% 0%;
}
button.ctrl_contract.gray_b:before {
  /*-非選択時-*/
  background-position: 46.15385% 100%;
}
button.ctrlTablechat_btn {
  /*-座る（チャット）-*/
  left: 0;
  top: 1%;
}
button.ctrlTablechat_btn:before {
  background-position: 7.69% 0%;
}
button.ctrlTablechat_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 7.69231% 100%;
}
button.ctrlMapReturn_btn {
  /*-戻る-*/
  left: 0;
  bottom: 1%;
}
button.ctrlMapReturn_btn:before {
  background-position: 23.08% 0%;
}
button.ctrlMapReturn_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 23.07692% 100%;
}
button.ctrlSearchItem_btn {
  /*-呼出-*/
  right: 0;
  top: 1%;
}
button.ctrlSearchItem_btn:before {
  background-position: 15.38% 0%;
}
button.ctrlSearchItem_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 15.38462% 100%;
}
button.ctrlSearchItem2_btn {
  /*-虫メガネ-*/
  right: 0;
  top: 1%;
}
button.ctrlSearchItem2_btn:before {
  background-position: 53.68% 0%;
}
button.ctrlSearchItem2_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 53.67521% 100%;
}
button.ctrlChangingroom_btn {
  /*-着替え-*/
  right: 0;
  top: 1%;
}
button.ctrlChangingroom_btn:before {
  background-position: 30.77% 0%;
}
button.ctrlChangingroom_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 30.76923% 100%;
}
button.ctrl_compass {
  /*-コントローラー切り替え（コンパスアイコン）-*/
  left: 0;
  top: 1%;
}
button.ctrl_compass:before {
  background-position: 61.54% 0%;
}
button.ctrl_compass.gray_b:before {
  /*-非選択時-*/
  background-position: 61.53846% 100%;
}
button.ctrl_normal {
  /*-コントローラー切り替え（通常移動アイコン）-*/
  left: 0;
  top: 1%;
}
button.ctrl_normal:before {
  background-position: 69.23% 0%;
}
button.ctrl_normal.gray_b:before {
  /*-非選択時-*/
  background-position: 69.23077% 100%;
}
button.ctrlGooglemapOn_btn {
  /*- googlemap表示ボタン -*/
  left: 0;
  top: 1%;
}
button.ctrlGooglemapOn_btn:before {
  background-position: 76.92% 0%;
}
button.ctrlGooglemapOn_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 76.92308% 100%;
}
button.ctrlGooglemapOff_btn {
  /*- googlemap 消すボタン -*/
  left: 0;
  top: 1%;
}
button.ctrlGooglemapOff_btn:before {
  background-position: 84.62% 0%;
}
button.ctrlGooglemapOff_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 84.61538% 100%;
}
button.ctrl_viewUp_btn {
  /*- 上を見るボタン -*/
  left: 0;
  top: 1%;
}
button.ctrl_viewUp_btn:before {
  background-position: 92.31% 0%;
}
button.ctrl_viewUp_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 92.30769% 100%;
}
button.ctrl_viewDown_btn {
  /*- 下を見るボタン -*/
  left: 0;
  bottom: 1%;
}
button.ctrl_viewDown_btn:before {
  background-position: 100% 0%;
}
button.ctrl_viewDown_btn.gray_b:before {
  /*-非選択時-*/
  background-position: 100% 100%;
}

.test_181013.ctrlTablechat_btn {
  /*-座る（チャット）-*/
  left: 0;
  top: 1%;
}
.test_181013.ctrlTablechat_btn:before {
  background-position: 7.69231% 0%;
}
.test_181013.ctrlTablechat_btn.gray_b:before {
  background-position: -45px -33px;
  background-position: 7.69231% 100%;
}
.test_181013.ctrlMapReturn_btn {
  /*-戻る-*/
  left: 0;
  bottom: 1%;
}
.test_181013.ctrlMapReturn_btn:before {
  background-position: 23.07692% 0%;
}
.test_181013.ctrlMapReturn_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlMapReturn_btn.gray_b:before {
  background-position: -135px -33px;
  background-position: 23.07692% 100%;
}
.test_181013.ctrlSearchItem_btn {
  /*-呼出-*/
  right: 0;
  top: 1%;
}
.test_181013.ctrlSearchItem_btn:before {
  background-position: 15.38462% 0%;
}
.test_181013.ctrlSearchItem_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlSearchItem_btn.gray_b:before {
  background-position: 15.38462% 100%;
}
.test_181013.ctrlSearchItem2_btn {
  /*-虫メガネ-*/
  right: 0;
  top: 1%;
}
.test_181013.ctrlSearchItem2_btn:before {
  background-position: 53.67521% 0%;
}
.test_181013.ctrlSearchItem2_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlSearchItem2_btn.gray_b:before {
  background-position: 53.67521% 100%;
}
.test_181013.ctrlChangingroom_btn {
  /*-着替え-*/
  right: 0;
  top: 1%;
}
.test_181013.ctrlChangingroom_btn:before {
  background-position: 30.76923% 0%;
}
.test_181013.ctrlChangingroom_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlChangingroom_btn.gray_b:before {
  background-position: 30.76923% 100%;
}
.test_181013.ctrl_compass {
  /*-コントローラー切り替え（コンパスアイコン）-*/
  left: 0;
  top: 1%;
}
.test_181013.ctrl_compass:before {
  background-position: 61.53846% 0%;
}
.test_181013.ctrl_compass.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrl_compass.gray_b:before {
  background-position: 61.53846% 100%;
}
.test_181013.ctrl_normal {
  /*-コントローラー切り替え（通常移動アイコン）-*/
  left: 0;
  top: 1%;
}
.test_181013.ctrl_normal:before {
  background-position: 69.23077% 0%;
}
.test_181013.ctrl_normal.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrl_normal.gray_b:before {
  background-position: 0% 100%;
}
.test_181013.ctrlGooglemapOn_btn {
  /*- googlemap表示ボタン -*/
  left: 0;
  top: 1%;
}
.test_181013.ctrlGooglemapOn_btn:before {
  background-position: 76.92308% 0%;
}
.test_181013.ctrlGooglemapOn_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlGooglemapOn_btn.gray_b:before {
  background-position: 0% 100%;
}
.test_181013.ctrlGooglemapOff_btn {
  /*- googlemap 消すボタン -*/
  left: 0;
  top: 1%;
}
.test_181013.ctrlGooglemapOff_btn:before {
  background-position: 84.61538% 0%;
}
.test_181013.ctrlGooglemapOff_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrlGooglemapOff_btn.gray_b:before {
  background-position: 0% 100%;
}
.test_181013.ctrl_viewUp_btn {
  /*- 上を見るボタン -*/
  left: 0;
  top: 1%;
}
.test_181013.ctrl_viewUp_btn:before {
  background-position: 92.30769% 0%;
}
.test_181013.ctrl_viewUp_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrl_viewUp_btn.gray_b:before {
  background-position: 0% 100%;
}
.test_181013.ctrl_viewDown_btn {
  /*- 下を見るボタン -*/
  left: 0;
  top: 1%;
}
.test_181013.ctrl_viewDown_btn:before {
  background-position: 100% 0%;
}
.test_181013.ctrl_viewDown_btn.gray_b {
  /*-非選択時-*/
}
.test_181013.ctrl_viewDown_btn.gray_b:before {
  background-position: 0% 100%;
}

/*-同行用カバー-*/
.hide_controller {
  width: 100%;
  border-radius: 10px;
  text-align: left;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 50;
  top: 0;
  bottom: 0;
  text-align: center;
}
.hide_controller div {
  position: absolute;
  z-index: 35;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 4px double #adda90;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
}
.hide_controller div p {
  position: relative;
  z-index: 40;
  margin: 5px 0 5px;
  text-shadow: 0 2px 1px #fff, 2px 0 1px #fff, 2px 2px 1px #fff, -2px -2px 1px #fff;
}
.hide_controller div button {
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  padding: 8px 16px;
  position: relative;
  z-index: 10;
}
.hide_controller div button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.hide_controller div button:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.hide_controller div button.gray_b, .hide_controller div button.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.hide_controller div button.gray_b:hover, .hide_controller div button.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.hide_controller div button.gray_b:active, .hide_controller div button.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

/*-メイン用-*/
.contents_inner .hide_controller {
  border-radius: 10px 10px 0 0;
}

/*-サイドバー用-*/
.sub_wraper .hide_controller div {
  padding: 5px;
  width: 80%;
}

.sub_wraper .hide_controller {
  width: auto;
  left: -2%;
  right: -2%;
}
.sub_wraper .hide_controller div {
  padding: 3px 1px;
  width: auto;
  left: -1%;
  right: -1%;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  font-size: 90%;
}

.controller_miniset .hide_controller {
  /*-同行用カバー-*/
  border-radius: 10px 10px 10px 10px;
}
.controller_miniset .hide_controller div:before {
  display: none;
}

.ctrl_option_button1_0,
.ctrl_option_button2_0 {
  width: 45px;
  z-index: 20;
  height: 97px;
  position: relative;
}
.ctrl_option_button1_0 button,
.ctrl_option_button2_0 button {
  /*-ボタン共通設定-*/
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  display: block;
  position: absolute;
  -moz-background-size: 630px 66px;
  -o-background-size: 630px 66px;
  -webkit-background-size: 630px 66px;
  background-size: 630px 66px;
  width: 45px;
  height: 33px;
  background-image: url(../img/ctrl_option_b6.png);
  background-position: 0 0;
  z-index: 15;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  /*-文字を見えなくする-*/
}
.ctrl_option_button1_0 button.ctrl_expand,
.ctrl_option_button2_0 button.ctrl_expand {
  /*-拡大-*/
  right: 0;
  bottom: 5px;
}
.ctrl_option_button1_0 button.ctrl_expand:before,
.ctrl_option_button2_0 button.ctrl_expand:before {
  background-position: -225px 0;
}
.ctrl_option_button1_0 button.ctrl_expand.gray_b:before,
.ctrl_option_button2_0 button.ctrl_expand.gray_b:before {
  background-position: -225px -33px;
}
.ctrl_option_button1_0 button.ctrl_contract,
.ctrl_option_button2_0 button.ctrl_contract {
  /*-縮小-*/
  right: 0;
  bottom: 5px;
}
.ctrl_option_button1_0 button.ctrl_contract:before,
.ctrl_option_button2_0 button.ctrl_contract:before {
  background-position: -270px 0;
}
.ctrl_option_button1_0 button.ctrl_contract.gray_b:before,
.ctrl_option_button2_0 button.ctrl_contract.gray_b:before {
  background-position: -270px -33px;
}
.ctrl_option_button1_0 button.gray_b,
.ctrl_option_button2_0 button.gray_b {
  background-position: 0 -33px;
}
.ctrl_option_button1_0 button.gray_b:hover,
.ctrl_option_button2_0 button.gray_b:hover {
  /*-半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.ctrl_option_button1_0 button.gray_b:active,
.ctrl_option_button2_0 button.gray_b:active {
  /*-半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.ctrl_option_button1_0 button:before,
.ctrl_option_button2_0 button:before {
  content: "";
  display: block;
  position: absolute;
  background-image: url(../img/ctrl_option_b6.png);
  -moz-background-size: 630px 66px;
  -o-background-size: 630px 66px;
  -webkit-background-size: 630px 66px;
  background-size: 630px 66px;
  background-position: 0 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
}
.ctrl_option_button1_0 button:hover,
.ctrl_option_button2_0 button:hover {
  /*-半透明処理-*/
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.ctrl_option_button1_0 button:active,
.ctrl_option_button2_0 button:active {
  /*-クリックで1px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}

.ctrlTablechat_btn_0 {
  /*-座る（チャット）-*/
  left: 0;
  top: 5px;
}
.ctrlTablechat_btn_0:before {
  background-position: -45px 0;
}
.ctrlTablechat_btn_0.gray_b:before {
  background-position: -45px -33px;
}

.ctrlMapReturn_btn_0 {
  /*-戻る-*/
  left: 0;
  bottom: 5px;
}
.ctrlMapReturn_btn_0:before {
  background-position: -135px 0;
}
.ctrlMapReturn_btn_0.gray_b {
  /*-非選択時-*/
}
.ctrlMapReturn_btn_0.gray_b:before {
  background-position: -135px -33px;
}

.ctrlSearchItem_btn_0 {
  /*-呼出-*/
  right: 0;
  top: 5px;
}
.ctrlSearchItem_btn_0:before {
  background-position: -90px 0;
}
.ctrlSearchItem_btn_0.gray_b {
  /*-非選択時-*/
}
.ctrlSearchItem_btn_0.gray_b:before {
  background-position: -90px -33px;
}

.ctrlSearchItem2_btn_0 {
  /*-虫眼鏡-*/
  right: 0;
  top: 5px;
}
.ctrlSearchItem2_btn_0:before {
  background-position: -315px 0;
}
.ctrlSearchItem2_btn_0.gray_b {
  /*-非選択時-*/
}
.ctrlSearchItem2_btn_0.gray_b:before {
  background-position: -315px -33px;
}

.ctrlChangingroom_btn_0 {
  /*-着替え-*/
  right: 0;
  top: 5px;
}
.ctrlChangingroom_btn_0:before {
  background-position: -180px 0;
}
.ctrlChangingroom_btn_0.gray_b {
  /*-非選択時-*/
}
.ctrlChangingroom_btn_0.gray_b:before {
  background-position: -180px -33px;
}

/*-移動パネル構造設定-*/
.controller > div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*-boxレイアウト親-*/
  max-width: 1260px;
  margin: auto;
}

/*-サイドボタン-*/
.ctrl_side_button1,
.ctrl_side_button2 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: auto;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*-左右位置-*/
  -webkit-justify-content: center;
  justify-content: center;
  /*-改行-*/
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  z-index: 15;
  width: 100%;
  max-width: 464px;
}
.ctrl_side_button1 button,
.ctrl_side_button2 button {
  min-width: 45px;
  min-height: 30px;
  height: auto;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 1.3;
  font-size: 98%;
  display: inline-block;
  margin: 8px;
  margin-left: 0.125%;
  margin-right: 0.125%;
  width: 100%;
  max-width: 200px;
}
.ctrl_side_button1 button:hover,
.ctrl_side_button2 button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.ctrl_side_button1 button:active,
.ctrl_side_button2 button:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.ctrl_side_button1 button.gray_b, .ctrl_side_button1 button.b_gray,
.ctrl_side_button2 button.gray_b,
.ctrl_side_button2 button.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.ctrl_side_button1 button.gray_b:hover, .ctrl_side_button1 button.b_gray:hover,
.ctrl_side_button2 button.gray_b:hover,
.ctrl_side_button2 button.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.ctrl_side_button1 button.gray_b:active, .ctrl_side_button1 button.b_gray:active,
.ctrl_side_button2 button.gray_b:active,
.ctrl_side_button2 button.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.ctrl_side_button1 button:active,
.ctrl_side_button2 button:active {
  /*-灰状態でも微妙に動くのが気になる（translate → marginに変更して修正済み）-*/
  margin-top: 6px;
  margin-bottom: 2px;
}
.ctrl_side_button1 .gray_b:active,
.ctrl_side_button2 .gray_b:active {
  /*-非選択時-*/
  margin-top: 4px;
  margin-bottom: 4px;
}

.ctrl_side_button1 {
  margin: 5px 6px 5px 18px;
  /*-上下位置(上から)-*/
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  /*-複数行の位置-*/
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

.ctrl_side_button2 {
  margin: 5px 18px 5px 10px;
  /*-上下位置(下から)-*/
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  /*-複数行の位置-*/
  -webkit-align-content: flex-end;
  align-content: flex-end;
}

@media screen and (max-width: 720px) {
  /*-720px以下 ボタンの数-*/
}
/*-▲移動パネル構造設定▲-*/
/*-サブメニューボタン-*/
.m_navi {
  text-align: left;
  background-color: #d1cbba;
  position: relative;
}
.m_navi:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: calc(80% - 5px);
  background-color: #c1b9a2;
  border-top: 5px solid #c9c2ae;
  left: 0;
  bottom: 0;
}
.m_navi ul {
  display: table;
  border-collapse: separate;
  border-spacing: 1px 0;
  width: 100%;
  table-layout: fixed;
  /*-table-cellの均等割り用-*/
  text-align: center;
}
@media screen and (max-width: 640px) {
  .m_navi ul {
    /*-画面サイズが640px以下-*/
    width: calc(100% - 4px);
    margin-left: 2px;
    table-layout: auto;
    /*-table-cellの均等割り用-*/
  }
}
.m_navi li {
  display: table-cell;
  width: auto;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: bold;
  border-bottom: 1px solid #e9e9e9;
  vertical-align: middle;
  position: relative;
}
@media screen and (max-width: 640px) {
  .m_navi li {
    /*- 0640px以下 -*/
    font-weight: normal;
    font-size: 80%;
    line-height: 1;
    letter-spacing: -0.1em;
  }
  .m_navi li a {
    font-weight: normal !important;
  }
}
.m_navi li.select {
  /*-選択時-*/
  position: relative;
}
.m_navi li.select:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -3px;
}
.m_navi li.gray {
  /*-選択不可-*/
  background-color: #ebebeb !important;
  color: #a9a9a9;
}
.m_navi li.gray a {
  cursor: auto !important;
  color: #a9a9a9;
}
.m_navi li.gray a:hover:after {
  /*-下線透明-*/
  background-color: transparent !important;
  color: #a9a9a9;
}
.m_navi li:not(.gray) {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.m_navi li:not(.gray):not(.select):hover {
  text-shadow: none;
}
.m_navi li a {
  /*-リンク共通設定-*/
  font-weight: bold;
  cursor: pointer;
  display: block;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 3px;
}
.m_navi li a:before {
  /*-選択範囲拡張-*/
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 0px;
  bottom: 0px;
}
.m_navi li a:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -3px;
}
.m_navi .m_navi01 {
  background-color: #ffb7a9;
}
.m_navi .m_navi01:hover {
  background-color: #ff8067;
}
.m_navi .m_navi01 a:hover:after {
  /*-マウスオーバー下線-*/
  background-color: #ff8067;
}
.m_navi .m_navi01.select {
  /*-選択時-*/
  background-color: #ff7357;
}
.m_navi .m_navi01.select:before {
  background-color: #ffc0b3;
}
.m_navi .m_navi02 {
  background-color: #ffc675;
}
.m_navi .m_navi02:hover {
  background-color: #ffaa33;
}
.m_navi .m_navi02 a:hover:after {
  /*-マウスオーバー下線-*/
  background-color: #ffaa33;
}
.m_navi .m_navi02.select {
  /*-選択時-*/
  background-color: #ffa423;
}
.m_navi .m_navi02.select:before {
  background-color: #ffca7f;
}
.m_navi .m_navi03 {
  background-color: #9cd960;
}
.m_navi .m_navi03:hover {
  background-color: #7bc730;
}
.m_navi .m_navi03 a:hover:after {
  /*-マウスオーバー下線-*/
  background-color: #7bc730;
}
.m_navi .m_navi03.select {
  /*-選択時-*/
  background-color: #74bb2d;
}
.m_navi .m_navi03.select:before {
  background-color: #a2db68;
}
.m_navi .m_navi04 {
  background-color: #72d5b4;
}
.m_navi .m_navi04:hover {
  background-color: #3ec699;
}
.m_navi .m_navi04 a:hover:after {
  /*-マウスオーバー下線-*/
  background-color: #3ec699;
}
.m_navi .m_navi04.select {
  /*-選択時-*/
  background-color: #38bd90;
}
.m_navi .m_navi04.select:before {
  background-color: #79d8b8;
}
.m_navi .m_navi05 {
  background-color: #74c3ea;
}
.m_navi .m_navi05:hover {
  background-color: #3aaae2;
}
.m_navi .m_navi05 a:hover:after {
  /*-マウスオーバー下線-*/
  background-color: #3aaae2;
}
.m_navi .m_navi05.select {
  /*-選択時-*/
  background-color: #2ca5e0;
}
.m_navi .m_navi05.select:before {
  background-color: #7cc7ec;
}

.sub_contents_inner {
  width: 98%;
  min-height: 100px;
  border-radius: 10px;
  text-align: left;
  margin: 30px auto 10px;
  /*-外周-*/
  position: relative;
  border-radius: 10px;
  background-color: #c9ea84;
  border: 1px solid #adda90;
}
.sub_contents_inner:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background-color: #effad7;
  border-radius: 10px;
  z-index: 0;
}
.sub_contents_inner:after {
  /*-ベース-*/
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 20px;
  z-index: 1;
}
.sub_contents_inner:after {
  top: 8px;
  bottom: 8px;
  border: 1px solid #dcf1b0;
}
.sub_contents_inner div {
  position: relative;
  z-index: 10;
}
.sub_contents_inner .mbox_chara_kai {
  /*-キャラ顔-*/
  position: absolute;
  display: block;
  z-index: 300;
  border: none;
  height: 128px;
  width: 128px;
  margin-top: -30px;
  border-radius: 10px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZjVhZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dff5ad));
  background-image: -moz-linear-gradient(top, #ffffff, #dff5ad);
  background-image: -webkit-linear-gradient(top, #ffffff, #dff5ad);
  background-image: linear-gradient(to bottom, #ffffff, #dff5ad);
  border: 2px solid #c9ea84;
}
.sub_contents_inner .mbox_chara_kai:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #fff;
  border-radius: 8px;
}
.sub_contents_inner .mbox_chara_kai img {
  /*-キャラ顔-*/
}
.sub_contents_inner .drag_area {
  /*-つまんで動かす用-*/
  border-radius: 6px 6px 0 0;
  left: inherit;
  transform: none;
  right: 153px;
  border-radius: 0 0 6px 6px;
  top: 100%;
  position: absolute;
  height: 22px;
}
.sub_contents_inner .drag_area:before {
  top: 1px;
}

.sub_contents_inner .mbox_chara_kai + .m_txt_kai {
  margin-left: 130px;
}

.m_txt_kai .m_middle_kai {
  border: 1px solid transparent;
  /*-borderが無いと表示がおかしくなる-*/
  margin-top: -32px;
  position: relative;
  display: block;
}
.m_txt_kai .m_name_kai {
  /*-名前-*/
  position: absolute;
  top: 1px;
  left: -28px;
}
.m_txt_kai .m_name_kai p {
  display: inline-block;
  background: #5D9839;
  font-weight: bold;
  margin: 0;
  min-height: 29px;
  color: #fff;
  text-decoration: none;
  border-radius: 0 15px 0 0;
  padding: 3px 15px 0 30px;
  font-weight: bold;
  border: 2px solid #c9ea84;
  border-bottom: 0;
  letter-spacing: 1px;
}
.m_txt_kai .m_txt_area_kai {
  margin: 42px 10px 5px 5px;
  min-height: 6em;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #528532;
}

/*-移動パネル8方向-*/
.ctrl_octas {
  /*-移動ボタン(8方位)-*/
}
.ctrl_octas:before {
  z-index: 10;
  top: -7%;
  right: -10%;
  bottom: -7%;
  left: -10%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-image: url(../img/ctrl2_move_bg.png);
  background-position: 0 0;
}
.ctrl_octas:after {
  top: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
}
.ctrl_octas.ctrl_modeB:before {
  display: none;
}

/*- 8方向コントローラー -*/
.octas .ctrl_direction2 {
  display: none;
}
.octas .ctrl_direction2.ctrl_octas:not(.ctrl_modeB) {
  display: block;
}
.octas .ctrl_octas:after {
  top: 3%;
  right: 3%;
  bottom: 3%;
  left: 3%;
}
.octas .ctrl_octas.ctrl_modeB:after {
  top: 1%;
  right: 1%;
  bottom: 1%;
  left: 1%;
}
.octas.miniset .ctrl_octas:before {
  top: -6%;
  right: -8%;
  bottom: -6%;
  left: -8%;
}
.octas.miniset > div {
  display: block;
}

.ctrl_octasNW_img,
.ctrl_octasN_img,
.ctrl_octasNE_img,
.ctrl_octasE_img,
.ctrl_octasSE_img,
.ctrl_octasS_img,
.ctrl_octasSW_img,
.ctrl_octasW_img,
.ctrl_octasRL_img {
  /*-div共通設定（画像部分）-*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  /*-文字を見えなくする-*/
  position: absolute;
  background-image: url("../img/ctrl2_move.png");
  z-index: 15;
}
.ctrl_octasNW_btn,
.ctrl_octasN_btn,
.ctrl_octasNE_btn,
.ctrl_octasE_btn,
.ctrl_octasSE_btn,
.ctrl_octasS_btn,
.ctrl_octasSW_btn,
.ctrl_octasW_btn,
.ctrl_octasRL_btn {
  /*-div共通設定（ボタン部分）-*/
  background-color: rgba(255, 0, 0, 0.1);
  position: absolute;
  z-index: 1;
  border: none;
  opacity: 0;
  /*-文字がはみ出て反応するのを防ぐため-*/
  font-size: 1%;
  overflow: hidden;
}

.modeB .ctrl_octasNW_img,
.modeB .ctrl_octasN_img,
.modeB .ctrl_octasNE_img,
.modeB .ctrl_octasE_img,
.modeB .ctrl_octasSE_img,
.modeB .ctrl_octasS_img,
.modeB .ctrl_octasSW_img,
.modeB .ctrl_octasW_img,
.modeB .ctrl_octasRL_img {
  /*-div共通設定（画像部分）-*/
  background-image: url("../img/ctrl2_move_modeb.png");
}

.ctrl_octasNW_img {
  /*-左上ボタン画像div-*/
  -moz-background-size: 700% 865.85%;
  -o-background-size: 700% 865.85%;
  -webkit-background-size: 700% 865.85%;
  background-size: 700% 865.85%;
  background-position: 0% 22.93%;
  width: 36.13%;
  height: 37.61%;
  left: 5.48%;
  top: 4.59%;
}
.ctrl_octasNW_btn {
  /*-左上ボタン-*/
  width: 23.87%;
  height: 28.44%;
  left: 12.26%;
  top: 8.26%;
}
.ctrl_octasNW_btn.front_b + .ctrl_octasNW_img {
  /*-前方向三角-*/
  background-position: 0% 22.93%;
}
.ctrl_octasNW_btn.right_b + .ctrl_octasNW_img {
  /*-右方向矢印-*/
  background-position: 16.67% 22.93%;
}
.ctrl_octasNW_btn.left_b + .ctrl_octasNW_img {
  /*-左方向矢印-*/
  background-position: 33.33% 22.93%;
}
.ctrl_octasNW_btn.front2_b + .ctrl_octasNW_img {
  /*-前方向三角（赤）-*/
  background-position: 50% 22.93%;
}
.ctrl_octasNW_btn.gray_b.red + .ctrl_octasNW_img {
  /*-進入禁止（赤）-*/
  background-position: 66.67% 22.93%;
}
.ctrl_octasNW_btn.gray_b + .ctrl_octasNW_img {
  /*-非選択（灰色）-*/
  background-position: 83.33% 22.93%;
  opacity: 0.6;
}

.ctrl_octasN_img {
  /*-上ボタン画像div-*/
  -moz-background-size: 739.62% 986.11%;
  -o-background-size: 739.62% 986.11%;
  -webkit-background-size: 739.62% 986.11%;
  background-size: 739.62% 986.11%;
  background-position: 0% 0%;
  width: 34.19%;
  height: 33.03%;
  left: 32.9%;
  top: 0%;
}
.ctrl_octasN_btn {
  /*-上ボタン-*/
  width: 26.45%;
  height: 26.61%;
  left: 37.1%;
  top: 1.38%;
}
.ctrl_octasN_btn.front_b + .ctrl_octasN_img {
  /*-前方向三角-*/
  background-position: 0% 0%;
}
.ctrl_octasN_btn.right_b + .ctrl_octasN_img {
  /*-右方向矢印-*/
  background-position: 15.63% 0%;
}
.ctrl_octasN_btn.left_b + .ctrl_octasN_img {
  /*-左方向矢印-*/
  background-position: 31.27% 0%;
}
.ctrl_octasN_btn.front2_b + .ctrl_octasN_img {
  /*-前方向三角（赤）-*/
  background-position: 46.9% 0%;
}
.ctrl_octasN_btn.gray_b.red + .ctrl_octasN_img {
  /*-進入禁止（赤）-*/
  background-position: 62.54% 0%;
}
.ctrl_octasN_btn.gray_b + .ctrl_octasN_img {
  /*-非選択（灰色）-*/
  background-position: 78.17% 0%;
  opacity: 0.6;
}

.ctrl_octasNE_img {
  /*-右上ボタン画像div-*/
  -moz-background-size: 700% 865.85%;
  -o-background-size: 700% 865.85%;
  -webkit-background-size: 700% 865.85%;
  background-size: 700% 865.85%;
  background-position: 0% 35.99%;
  width: 36.13%;
  height: 37.61%;
  left: 58.39%;
  top: 4.59%;
}
.ctrl_octasNE_btn {
  /*-右上ボタン-*/
  width: 23.87%;
  height: 28.44%;
  left: 64.52%;
  top: 8.26%;
}
.ctrl_octasNE_btn.front_b + .ctrl_octasNE_img {
  /*-前方向三角-*/
  background-position: 0% 35.99%;
}
.ctrl_octasNE_btn.right_b + .ctrl_octasNE_img {
  /*-右方向矢印-*/
  background-position: 16.67% 35.99%;
}
.ctrl_octasNE_btn.left_b + .ctrl_octasNE_img {
  /*-左方向矢印-*/
  background-position: 33.33% 35.99%;
}
.ctrl_octasNE_btn.front2_b + .ctrl_octasNE_img {
  /*-前方向三角（赤）-*/
  background-position: 50% 35.99%;
}
.ctrl_octasNE_btn.gray_b.red + .ctrl_octasNE_img {
  /*-進入禁止（赤）-*/
  background-position: 66.67% 35.99%;
}
.ctrl_octasNE_btn.gray_b + .ctrl_octasNE_img {
  /*-非選択（灰色）-*/
  background-position: 83.33% 35.99%;
  opacity: 0.6;
}

.ctrl_octasE_img {
  /*-右ボタン画像div-*/
  -moz-background-size: 800% 910.26%;
  -o-background-size: 800% 910.26%;
  -webkit-background-size: 800% 910.26%;
  background-size: 800% 910.26%;
  background-position: 0% 74.68%;
  width: 31.61%;
  height: 35.78%;
  left: 68.39%;
  top: 32.11%;
}
.ctrl_octasE_btn {
  /*-右ボタン-*/
  width: 30.32%;
  height: 22.48%;
  left: 69.35%;
  top: 38.07%;
}
.ctrl_octasE_btn.front_b + .ctrl_octasE_img {
  /*-前方向三角-*/
  background-position: 0% 74.68%;
}
.ctrl_octasE_btn.right_b + .ctrl_octasE_img {
  /*-右方向矢印-*/
  background-position: 14.29% 74.68%;
}
.ctrl_octasE_btn.left_b + .ctrl_octasE_img {
  /*-左方向矢印-*/
  background-position: 28.57% 74.68%;
}
.ctrl_octasE_btn.front2_b + .ctrl_octasE_img {
  /*-前方向三角（赤）-*/
  background-position: 42.86% 74.68%;
}
.ctrl_octasE_btn.gray_b.red + .ctrl_octasE_img {
  /*-進入禁止（赤）-*/
  background-position: 57.14% 74.68%;
}
.ctrl_octasE_btn.gray_b + .ctrl_octasE_img {
  /*-非選択（灰色）-*/
  background-position: 71.43% 74.68%;
  opacity: 0.6;
}

.ctrl_octasSE_img {
  /*-右下ボタン画像div-*/
  -moz-background-size: 700% 865.85%;
  -o-background-size: 700% 865.85%;
  -webkit-background-size: 700% 865.85%;
  background-size: 700% 865.85%;
  background-position: 0% 49.04%;
  width: 36.13%;
  height: 37.61%;
  left: 58.39%;
  top: 55.87%;
}
.ctrl_octasSE_btn {
  /*-右下ボタン-*/
  width: 23.87%;
  height: 28.44%;
  left: 64.52%;
  top: 61.93%;
}
.ctrl_octasSE_btn.front_b + .ctrl_octasSE_img {
  /*-前方向三角-*/
  background-position: 0% 49.04%;
}
.ctrl_octasSE_btn.right_b + .ctrl_octasSE_img {
  /*-右方向矢印-*/
  background-position: 16.67% 49.04%;
}
.ctrl_octasSE_btn.left_b + .ctrl_octasSE_img {
  /*-左方向矢印-*/
  background-position: 33.33% 49.04%;
}
.ctrl_octasSE_btn.front2_b + .ctrl_octasSE_img {
  /*-前方向三角（赤）-*/
  background-position: 50% 49.04%;
}
.ctrl_octasSE_btn.gray_b.red + .ctrl_octasSE_img {
  /*-進入禁止（赤）-*/
  background-position: 66.67% 49.04%;
}
.ctrl_octasSE_btn.gray_b + .ctrl_octasSE_img {
  /*-非選択（灰色）-*/
  background-position: 83.33% 49.04%;
  opacity: 0.6;
}

.ctrl_octasS_img {
  /*-下ボタン画像div-*/
  -moz-background-size: 739.62% 986.11%;
  -o-background-size: 739.62% 986.11%;
  -webkit-background-size: 739.62% 986.11%;
  background-size: 739.62% 986.11%;
  background-position: 0% 11.29%;
  width: 34.19%;
  height: 33.03%;
  left: 32.9%;
  top: 66.97%;
}
.ctrl_octasS_btn {
  /*-下ボタン-*/
  width: 26.45%;
  height: 26.61%;
  left: 37.1%;
  top: 70.64%;
}
.ctrl_octasS_btn.front_b + .ctrl_octasS_img {
  /*-前方向三角-*/
  background-position: 0% 11.29%;
}
.ctrl_octasS_btn.right_b + .ctrl_octasS_img {
  /*-右方向矢印-*/
  background-position: 15.63% 11.29%;
}
.ctrl_octasS_btn.left_b + .ctrl_octasS_img {
  /*-左方向矢印-*/
  background-position: 31.27% 11.29%;
}
.ctrl_octasS_btn.front2_b + .ctrl_octasS_img {
  /*-前方向三角（赤）-*/
  background-position: 46.9% 11.29%;
}
.ctrl_octasS_btn.gray_b.red + .ctrl_octasS_img {
  /*-進入禁止（赤）-*/
  background-position: 62.54% 11.29%;
}
.ctrl_octasS_btn.gray_b + .ctrl_octasS_img {
  /*-非選択（灰色）-*/
  background-position: 78.17% 11.29%;
  opacity: 0.6;
}

.ctrl_octasSW_img {
  /*-左下ボタン画像div-*/
  -moz-background-size: 700% 865.85%;
  -o-background-size: 700% 865.85%;
  -webkit-background-size: 700% 865.85%;
  background-size: 700% 865.85%;
  background-position: 0% 62.1%;
  width: 36.13%;
  height: 37.61%;
  left: 5.48%;
  top: 55.87%;
}
.ctrl_octasSW_btn {
  /*-左下ボタン-*/
  width: 23.87%;
  height: 28.44%;
  left: 12.26%;
  top: 61.93%;
}
.ctrl_octasSW_btn.front_b + .ctrl_octasSW_img {
  /*-前方向三角-*/
  background-position: 0% 62.1%;
}
.ctrl_octasSW_btn.right_b + .ctrl_octasSW_img {
  /*-右方向矢印-*/
  background-position: 16.67% 62.1%;
}
.ctrl_octasSW_btn.left_b + .ctrl_octasSW_img {
  /*-左方向矢印-*/
  background-position: 33.33% 62.1%;
}
.ctrl_octasSW_btn.front2_b + .ctrl_octasSW_img {
  /*-前方向三角（赤）-*/
  background-position: 50% 62.1%;
}
.ctrl_octasSW_btn.gray_b.red + .ctrl_octasSW_img {
  /*-進入禁止（赤）-*/
  background-position: 66.67% 62.1%;
}
.ctrl_octasSW_btn.gray_b + .ctrl_octasSW_img {
  /*-非選択（灰色）-*/
  background-position: 83.33% 62.1%;
  opacity: 0.6;
}

.ctrl_octasW_img {
  /*-左ボタン画像div-*/
  -moz-background-size: 800% 910.26%;
  -o-background-size: 800% 910.26%;
  -webkit-background-size: 800% 910.26%;
  background-size: 800% 910.26%;
  background-position: 0% 87.03%;
  width: 31.61%;
  height: 35.78%;
  left: 0%;
  top: 32.11%;
}
.ctrl_octasW_btn {
  /*-左ボタン-*/
  width: 30.32%;
  height: 22.48%;
  left: 0.32%;
  top: 38.07%;
}
.ctrl_octasW_btn.front_b + .ctrl_octasW_img {
  /*-前方向三角-*/
  background-position: 0% 87.03%;
}
.ctrl_octasW_btn.right_b + .ctrl_octasW_img {
  /*-右方向矢印-*/
  background-position: 14.29% 87.03%;
}
.ctrl_octasW_btn.left_b + .ctrl_octasW_img {
  /*-左方向矢印-*/
  background-position: 28.57% 87.03%;
}
.ctrl_octasW_btn.front2_b + .ctrl_octasW_img {
  /*-前方向三角（赤）-*/
  background-position: 42.86% 87.03%;
}
.ctrl_octasW_btn.gray_b.red + .ctrl_octasW_img {
  /*-進入禁止（赤）-*/
  background-position: 57.14% 87.03%;
}
.ctrl_octasW_btn.gray_b + .ctrl_octasW_img {
  /*-非選択（灰色）-*/
  background-position: 71.43% 87.03%;
  opacity: 0.6;
}

.ctrl_octasRL_img {
  /*-読込ボタン画像div-*/
  -moz-background-size: 784% 865.85%;
  -o-background-size: 784% 865.85%;
  -webkit-background-size: 784% 865.85%;
  background-size: 784% 865.85%;
  background-position: 0% 100%;
  width: 32.26%;
  height: 37.61%;
  left: 33.87%;
  top: 30.73%;
}
.ctrl_octasRL_btn {
  /*-読込ボタン-*/
  width: 26.45%;
  height: 29.36%;
  left: 37.1%;
  top: 33.94%;
}
.ctrl_octasRL_btn.front_b + .ctrl_octasRL_img {
  /*-前方向三角-*/
  background-position: 0% 100%;
}
.ctrl_octasRL_btn.right_b + .ctrl_octasRL_img {
  /*-右方向矢印-*/
  background-position: 14.62% 100%;
}
.ctrl_octasRL_btn.left_b + .ctrl_octasRL_img {
  /*-左方向矢印-*/
  background-position: 29.24% 100%;
}
.ctrl_octasRL_btn.front2_b + .ctrl_octasRL_img {
  /*-前方向三角（赤）-*/
  background-position: 43.86% 100%;
}
.ctrl_octasRL_btn.gray_b.red + .ctrl_octasRL_img {
  /*-進入禁止（赤）-*/
  background-position: 58.48% 100%;
}
.ctrl_octasRL_btn.gray_b + .ctrl_octasRL_img {
  /*-非選択（灰色）-*/
  background-position: 73.1% 100%;
  opacity: 0.6;
}

/*- 移動パネル (3Dパース) 2018.10.17追加-*/
.ctrl_direction2.ctrl_pers3D:after {
  display: none;
}

/*- .ctrl_direction2内の ボタン画像の書き換え -*/
.ctrl_pers3D .ctrlMapL_img,
.ctrl_pers3D .ctrlMapR_img,
.ctrl_pers3D .ctrlMapF_img,
.ctrl_pers3D .ctrlMapB_img,
.ctrl_pers3D .ctrlMapRL_img {
  /*-div共通設定（画像部分）-*/
  background-image: url(../img/ctrl_move_pers3d.png);
}
.ctrl_pers3D .ctrlMapL_img {
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 0% 0%;
  width: 37.09%;
  height: 53.85%;
  left: 0%;
  top: 23.08%;
}
.ctrl_pers3D .ctrlMapL_btn {
  width: 27.48%;
  height: 37.02%;
  left: 1.32%;
  top: 28.37%;
}
.ctrl_pers3D .ctrlMapL_btn.gray_b + .ctrlMapL_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 63.64% 0%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapL_btn.rotate_btn + .ctrlMapL_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 0% 35%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapL_btn.rotate_btn.gray_b + .ctrlMapL_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 63.64% 35%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapR_img {
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 31.82% 0%;
  width: 37.09%;
  height: 53.85%;
  left: 62.91%;
  top: 23.08%;
}
.ctrl_pers3D .ctrlMapR_btn {
  width: 27.48%;
  height: 37.02%;
  left: 71.52%;
  top: 28.37%;
}
.ctrl_pers3D .ctrlMapR_btn.gray_b + .ctrlMapR_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 95.45% 0%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapR_btn.rotate_btn + .ctrlMapR_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 31.82% 35%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapR_btn.rotate_btn.gray_b + .ctrlMapR_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 414.29% 385.71%;
  -o-background-size: 414.29% 385.71%;
  -webkit-background-size: 414.29% 385.71%;
  background-size: 414.29% 385.71%;
  background-position: 95.45% 35%;
  width: 37.09%;
  height: 53.85%;
}
.ctrl_pers3D .ctrlMapF_img {
  -moz-background-size: 200% 771.43%;
  -o-background-size: 200% 771.43%;
  -webkit-background-size: 200% 771.43%;
  background-size: 200% 771.43%;
  background-position: 0% 59.57%;
  width: 76.82%;
  height: 26.92%;
  left: 11.59%;
  top: 5.77%;
}
.ctrl_pers3D .ctrlMapF_btn {
  width: 69.21%;
  height: 19.23%;
  left: 15.56%;
  top: 7.21%;
}
.ctrl_pers3D .ctrlMapF_btn.gray_b + .ctrlMapF_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 200% 771.43%;
  -o-background-size: 200% 771.43%;
  -webkit-background-size: 200% 771.43%;
  background-size: 200% 771.43%;
  background-position: 100% 59.57%;
  width: 76.82%;
  height: 26.92%;
}
.ctrl_pers3D .ctrlMapB_img {
  -moz-background-size: 241.67% 490.91%;
  -o-background-size: 241.67% 490.91%;
  -webkit-background-size: 241.67% 490.91%;
  background-size: 241.67% 490.91%;
  background-position: 0% 81.4%;
  width: 63.58%;
  height: 42.31%;
  left: 18.54%;
  top: 50%;
}
.ctrl_pers3D .ctrlMapB_btn {
  width: 38.74%;
  height: 30.77%;
  left: 30.79%;
  top: 56.73%;
}
.ctrl_pers3D .ctrlMapB_btn.gray_b + .ctrlMapB_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 241.67% 490.91%;
  -o-background-size: 241.67% 490.91%;
  -webkit-background-size: 241.67% 490.91%;
  background-size: 241.67% 490.91%;
  background-position: 70.59% 81.4%;
  width: 63.58%;
  height: 42.31%;
}
.ctrl_pers3D .ctrlMapRL_img {
  -moz-background-size: 446.15% 654.55%;
  -o-background-size: 446.15% 654.55%;
  -webkit-background-size: 446.15% 654.55%;
  background-size: 446.15% 654.55%;
  background-position: 0% 100.55%;
  width: 34.44%;
  height: 31.73%;
  left: 32.78%;
  top: 24.52%;
}
.ctrl_pers3D .ctrlMapRL_btn {
  width: 25.5%;
  height: 23.08%;
  left: 37.09%;
  top: 28.37%;
}
.ctrl_pers3D .ctrlMapRL_btn.gray_b + .ctrlMapRL_img {
  /*-非選択（灰色）-*/
  -moz-background-size: 446.15% 654.55%;
  -o-background-size: 446.15% 654.55%;
  -webkit-background-size: 446.15% 654.55%;
  background-size: 446.15% 654.55%;
  background-position: 28.89% 100.55%;
  width: 34.44%;
  height: 31.73%;
}

/*-移動パネル半透明BG-*/
.controller.miniset.semi_transparent {
  background-color: rgba(51, 51, 51, 0.6);
  border-color: rgba(173, 218, 144, 0.6);
  overflow: hidden;
}
.controller.miniset.semi_transparent:after {
  background-color: transparent;
}
.controller.miniset.semi_transparent:before {
  background-color: transparent;
  border: 11px solid #fff;
  border-radius: 30px;
  left: -10px;
  right: -10px;
  top: -10px;
  bottom: -10px;
  opacity: 0.6;
}
.controller.miniset.semi_transparent .ctrl_direction2:after {
  background-color: rgba(51, 51, 51, 0.15);
}
.controller.miniset.semi_transparent .ctrl_direction2.ctrl_pers3D:after {
  background: #000;
  opacity: 0.15;
}
.controller.miniset.semi_transparent .ctrl_octas:after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.controller.miniset.semi_transparent .ctrl_side_button1 > button:first-of-type {
  margin-top: 20px;
}
.controller.miniset.semi_transparent.map_slideshow .ctrl_box_player::before {
  /*-影無くす-*/
  display: none;
}

/*-modeB-*/
.octas.modeB .ctrl_direction2 {
  display: none;
}
.octas.modeB .ctrl_direction2.ctrl_octas {
  display: none;
}
.octas.modeB .ctrl_direction2.ctrl_octas.ctrl_modeB {
  display: block;
}

/*-googlemap + 移動パネル-*/
.ctrl_set .controller.miniset.semi_transparent {
  margin: 0;
  border-radius: 0;
  width: 100%;
  display: block;
  border: none;
  min-height: 104px;
  padding: 5px 0 0;
}
.ctrl_set .controller.miniset.semi_transparent .ctrl_direction2:after {
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
}
.ctrl_set .controller.miniset .ctrl_direction_wrapper {
  width: 100%;
}
.ctrl_set .controller.miniset .ctrl_direction_wrapper .ctrl_direction_inner {
  padding-top: 70%;
}
.ctrl_set .controller.miniset .ctrl_direction_wrapper .ctrl_direction2 {
  width: 96%;
  padding-bottom: 65.6%;
}
.ctrl_set .controller.miniset .ctrl_direction_wrapper .ctrl_option_button1 {
  margin-left: -25%;
  width: 28%;
}
.ctrl_set .controller.miniset .ctrl_direction_wrapper .ctrl_option_button2 {
  margin-right: -25%;
  width: 28%;
}
.ctrl_set .miniset > div {
  max-width: 150px;
  width: 100%;
}

@media screen and (max-width: 1126px) {
  /*- $width_1000以下 -*/
  .ctrl_set {
    min-width: 160px;
    min-height: 160px;
  }
  .ctrl_set .miniset > div {
    max-width: 100px;
    width: 100%;
  }
  .ctrl_set.floating_window .other_area_iframe {
    min-width: 160px;
    min-height: 160px;
  }
}
/*-マップスライドショー-*/
.map_slideshow .ctrl_direction2.ctrl_map_slideshow::before, .map_slideshow .ctrl_direction2.ctrl_map_slideshow::after {
  display: none;
}
.map_slideshow .ctrl_direction2:not(.ctrl_map_slideshow) {
  /*-.ctrl_map_slideshow以外は非表示-*/
  display: none;
}

.controller:not(.map_slideshow) .ctrl_direction2.ctrl_map_slideshow {
  /*-.map_slideshow以外の時は.ctrl_map_slideshowを非表示-*/
  display: none;
}

/*- マップスライドショープレイヤー　ボタン1つでも３つでも動くようにするのでボックスレイアウト-*/
.ctrl_box_player {
  width: 300px;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*-boxレイアウト親-*/
  /*-左右位置-*/
  -webkit-justify-content: center;
  justify-content: center;
  /*-上下位置(上から)-*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.ctrl_box_player::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-color: rgba(51, 51, 51, 0.05);
  border-radius: 20px;
}
.ctrl_box_player > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: auto;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  max-width: 48%;
  margin: 0;
  padding: 5px 0;
  font-size: 0;
}
.ctrl_box_player button {
  width: 90%;
  height: 0;
  padding-bottom: 93.6%;
  margin: auto;
  /*-センター-*/
  vertical-align: top;
  /*-改行隙間をなくす-*/
}

/*- マップスライドショープレイヤー　（.ctrl_direction2内での動作）*/
.ctrl_direction2 .ctrl_box_player {
  width: 94%;
  margin: 0 3%;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ctrl_direction2 .ctrl_box_player button {
  /*-打消し用-*/
  opacity: 1;
  position: relative;
  background-color: transparent;
  background-image: url(../img/ctrl_circle_b2.png);
}
.ctrl_direction2 .ctrl_box_player button:not(.gray_b):hover {
  /*-半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.ctrl_direction2 .ctrl_box_player button:not(.gray_b):active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.ctrl_direction2 .ctrl_box_player button.gray_b {
  /*-打消し用-*/
  display: block;
  cursor: default;
  outline: none;
  opacity: 0.8;
}

/*-miniset用-*/
.controller.miniset .ctrl_direction2.ctrl_map_slideshow {
  width: 100%;
}
.controller.miniset .ctrl_direction2 .ctrl_box_player {
  width: 90%;
  margin: 0 5%;
}
.controller.miniset .ctrl_direction2 .ctrl_box_player::before {
  border-radius: 12px;
  max-height: 82px;
}
.controller.miniset .ctrl_direction2 .ctrl_box_player > div {
  max-width: 42%;
}

@media screen and (max-width: 1126px) {
  /*-1126px以下 ボタンの数-*/
  .controller.miniset .ctrl_direction2 .ctrl_box_player {
    width: 100%;
    margin: 0;
  }
  .controller.miniset .ctrl_direction2 .ctrl_box_player::before {
    border-radius: 12px;
    max-height: 64px;
  }
  .controller.miniset .ctrl_direction2 .ctrl_box_player > div {
    max-width: 46%;
  }
}
/*-円形ボタン-*/
[class^="circle_b_"] {
  /*-前方一致class名-*/
  /*-共通設定-*/
  background-image: url(../img/ctrl_circle_b2.png);
  width: 125px;
  height: 130px;
  position: relative;
  border: none;
  border-color: transparent;
  background-color: transparent;
}
[class^="circle_b_"]:not(.gray_b):hover {
  /*-半透明処理-*/
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
[class^="circle_b_"]:not(.gray_b):active {
  /*-クリックで1px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
[class^="circle_b_"].gray_b {
  /*-非選択時-*/
  opacity: 0.8;
}

/*-円形ボタン ターン-*/
.circle_b_turn {
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 0% 0%;
}
.circle_b_turn.gray_b {
  /*-非選択時-*/
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 100% 0%;
}

/*-円形ボタン 右-*/
.circle_b_right {
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 0% 33.33%;
}
.circle_b_right.gray_b {
  /*-非選択時-*/
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 100% 33.33%;
}

/*-円形ボタン 左-*/
.circle_b_left {
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 0% 66.67%;
}
.circle_b_left.gray_b {
  /*-非選択時-*/
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 100% 66.67%;
}

/*-円形ボタン リロード-*/
.circle_b_reload {
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 0% 100%;
}
.circle_b_reload.gray_b {
  /*-非選択時-*/
  -moz-background-size: 200% 400%;
  -o-background-size: 200% 400%;
  -webkit-background-size: 200% 400%;
  background-size: 200% 400%;
  background-position: 100% 100%;
}

/*-一時-*/
/* スクリプトメッセージコントローラー */
#cf_ctrlmsg_base {
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  width: 152px;
  height: 26px;
  right: 0;
  top: -28px;
  background: url(../img/common/mesesage_forward.png) top left no-repeat;
}

/* ボタン */
#cf_ctrlmsg_btn0,
#cf_ctrlmsg_btn1 {
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  width: 40px;
  height: 12px;
  top: 9px;
}

#cf_ctrlmsg_btn0 {
  left: 67px;
  background: url(../img/common/messafe_parts1.gif) top left no-repeat;
  background-position: 0px 0px;
}

#cf_ctrlmsg_btn1 {
  left: 109px;
  background: url(../img/common/messafe_parts2.gif) top left no-repeat;
  background-position: 0px 0px;
}

#cf_ctrlmsg_btn0:hover,
#cf_ctrlmsg_btn1:hover {
  background-position: -40px 0;
}

#cf_ctrlmsg_btn0.s0n,
#cf_ctrlmsg_btn1.s0n {
  background-position: 0px 0px;
}

#cf_ctrlmsg_btn0:hover.s0n,
#cf_ctrlmsg_btn1:hover.s0n {
  background-position: -40px 0px;
}

#cf_ctrlmsg_btn0.s1n,
#cf_ctrlmsg_btn1.s1n {
  background-position: 0px -12px;
}

#cf_ctrlmsg_btn0:hover.s1n,
#cf_ctrlmsg_btn1:hover.s1n {
  background-position: -40px -12px;
}

#cf_ctrlmsg_btn0.s2n,
#cf_ctrlmsg_btn1.s2n {
  background-position: 0px -24px;
}

#cf_ctrlmsg_btn0:hover.s2n,
#cf_ctrlmsg_btn1:hover.s2n {
  background-position: -40px -24px;
}

#cf_ctrlmsg_btn0.s3n,
#cf_ctrlmsg_btn1.s3n {
  background-position: 0px -36px;
}

#cf_ctrlmsg_btn0:hover.s3n,
#cf_ctrlmsg_btn1:hover.s3n {
  background-position: -40px -36px;
}

/*-画面内リスト型メニュー-*/
/*-比率を保ったままウィンドウのサイズに合わせて拡縮-*/
.list_menu_wrapper {
  /*-外枠位置調整-*/
  position: absolute;
  top: 15%;
  left: 10%;
  right: 10%;
}

.list_menu,
.list_menu_dupple {
  /*-内部　paddingで縦サイズ調整-*/
  position: relative;
  width: 100%;
  height: 100%;
  padding: 50.5% 0 0;
  /*-半透明-*/
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 3px;
  /*-幅を広げるためのボーダー-*/
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 5px;
}

.list_menu_dupple {
  /*-重ね用-*/
  top: 3px;
  left: 8px;
  position: absolute;
  z-index: 1;
}

.list_menu_inner {
  /*-さらに内側　position:absoluteで範囲を全体に広げる-*/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.list_menu_inner > div {
  position: relative;
  height: 70%;
  display: inline-block;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.list_menu_inner > div:before, .list_menu_inner > div:after {
  /*-センタリング用-*/
  content: "";
  display: block;
  height: 100%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  width: auto;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.list_menu_inner > div .scroll_hidden {
  /*-これでスクロールバーを隠す-*/
  /*-無効化160318-*/
  height: 100%;
  width: 100%;
  max-width: 300px;
}
@media screen and (max-width: 420px) {
  .list_menu_inner > div .scroll_hidden {
    /*-画面サイズが420px以下-*/
    width: calc(100% + 6px);
  }
}
.list_menu_inner > div ul {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  /*-new画像が入るスペース確保-*/
  padding-left: 50px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 800px) {
  /*-画面サイズが800px以下-*/
  .list_menu_wrapper {
    /*-@800px外枠位置調整-*/
  }

  .list_menu {
    /*-@800px内部　paddingで縦サイズ調整-*/
    padding: 50% 0 0;
  }

  .list_menu_inner {
    /*-@800pxさらに内側　position:absoluteで範囲を全体に広げる-*/
  }
  .list_menu_inner > div {
    height: 75%;
  }
  .list_menu_inner > div ul {
    min-width: 220px;
  }
}
@media screen and (max-width: 420px) {
  /*-画面サイズが420px以下-*/
  .list_menu {
    /*-内部@420px　paddingで縦サイズ調整-*/
    padding: 46% 0 0;
  }

  .list_menu_inner {
    /*-@420pxさらに内側　position:absoluteで範囲を全体に広げる-*/
  }
  .list_menu_inner > div {
    height: 80%;
    display: block;
    padding-right: 50px;
    /*-naviスペース確保用-*/
  }
  .list_menu_inner > div:before, .list_menu_inner > div:after {
    /*-センタリング用-*/
    display: none;
  }
  .list_menu_inner > div ul {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 10px;
    padding-left: 25px;
    margin: 0;
  }
}
@media screen and (max-width: 380px) {
  /*-画面サイズが380px以下-*/
  .list_menu_inner {
    /*-@300pxさらに内側　position:absoluteで範囲を全体に広げる-*/
  }
  .list_menu_inner > div {
    height: 65%;
  }
}
.list_menu_inner p {
  /*-見出し-*/
  margin: 10px 0;
  padding: 10px;
  position: relative;
  z-index: 0;
  display: block;
  border-radius: 15px;
  font-size: 150%;
  display: inline-block;
  min-width: 300px;
  max-width: 500px;
  width: calc(100% - 6px);
  text-align: center;
}
.list_menu_inner p:before, .list_menu_inner p:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
}
.list_menu_inner p:before {
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  background-color: #C9F47D;
  border-radius: 15px / 50%;
}
.list_menu_inner p:after {
  top: 4px;
  right: 15px;
  bottom: 4px;
  left: 15px;
  background-color: #fff;
  border-radius: 18px / 50%;
}
.list_menu_inner li {
  margin-bottom: 10px;
  margin-top: 2px;
  margin-right: 5px;
  position: relative;
  font-size: 120%;
  text-align: left;
  border-radius: 20px 5px;
  background-color: #fff;
}
.list_menu_inner li:before {
  /*-三角上-*/
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  content: "";
  background-color: #84d2e3;
  border: 1px solid #31b3d0;
  position: absolute;
  z-index: -1;
  border-radius: 5px;
}
.list_menu_inner li:hover, .list_menu_inner li.hover, .list_menu_inner li.select_b {
  background-color: #fffef5;
}
.list_menu_inner li:hover:before, .list_menu_inner li.hover:before, .list_menu_inner li.select_b:before {
  /*-三角上-*/
  background-color: #ffd982;
  border-color: #ffee03;
}
.list_menu_inner li:hover a, .list_menu_inner li:hover a:hover, .list_menu_inner li.hover a, .list_menu_inner li.hover a:hover, .list_menu_inner li.select_b a, .list_menu_inner li.select_b a:hover {
  color: #ff7834;
}
.list_menu_inner li:hover, .list_menu_inner li.hover {
  /*-hover クラスの追加-*/
  background-color: #fff;
}
.list_menu_inner li:hover:before, .list_menu_inner li.hover:before {
  /*-三角上-*/
  border-color: #ff8302;
}
.list_menu_inner li.select_b {
  cursor: auto;
}
.list_menu_inner li.new_b {
  /*-newマークをつける-*/
}
.list_menu_inner li.new_b:after {
  content: "";
  width: 44px;
  height: 37px;
  left: -48px;
  border-style: solid;
  position: absolute;
  background-image: url(../img/menu_new.png);
  background-repeat: no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border: none;
}
@media screen and (max-width: 420px) {
  .list_menu_inner li.new_b {
    /*-画面サイズが420px以下-*/
  }
  .list_menu_inner li.new_b:after {
    top: 0;
    left: -25px;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -moz-transform: translateY(-10px) scale(0.65);
    -ms-transform: translateY(-10px) scale(0.65);
    -webkit-transform: translateY(-10px) scale(0.65);
    transform: translateY(-10px) scale(0.65);
  }
}
.list_menu_inner li.gray_b {
  /*-非選択状態-*/
  padding: 10px 15px;
  background-color: #f2f2f2;
  color: #a9a9a9;
}
.list_menu_inner li.gray_b:before {
  border-color: #ccc;
  background-color: #d9d9d9;
}
.list_menu_inner li.image50, .list_menu_inner li.image25 {
  /*-画像ボタン-*/
  background-color: #333;
  border-radius: 0px;
  padding: 0;
  border: none;
  /*-比率を保ったまま拡大縮小-*/
  position: relative;
  width: 98%;
}
.list_menu_inner li.image50:before, .list_menu_inner li.image25:before {
  display: none;
}
.list_menu_inner li.image50.hover, .list_menu_inner li.image25.hover {
  /*-class追加でのhover状態-*/
}
.list_menu_inner li.image50.hover a, .list_menu_inner li.image25.hover a {
  background-position: 0 -99.999999%;
}
.list_menu_inner li.image50 a, .list_menu_inner li.image25 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-background-size: 100% 400%;
  -o-background-size: 100% 400%;
  -webkit-background-size: 100% 400%;
  background-size: 100% 400%;
  background-position: 0 0;
}
.list_menu_inner li.image50 a:hover, .list_menu_inner li.image25 a:hover {
  background-position: 0 -99.999999%;
}
.list_menu_inner li.image50 a:active, .list_menu_inner li.image25 a:active {
  background-position: 0 -199.999999%;
  opacity: 0.4;
}
.list_menu_inner li.image50.gray_b a, .list_menu_inner li.image25.gray_b a {
  background-position: 0 -299.999999%;
  cursor: default;
  opacity: 1;
}
.list_menu_inner li.image50 {
  /*-比率を保ったまま拡大縮小-*/
  padding: 16.33327% 0 0;
}
.list_menu_inner li.image25 {
  /*-比率を保ったまま拡大縮小-*/
  padding: 8.16667% 0 0;
}
.list_menu_inner li.image25:after {
  /*-new_b用-*/
  width: 36px;
  height: 30px;
  left: -42px;
}
.list_menu_inner li a {
  vertical-align: middle;
  width: 100%;
  font-weight: bold;
  padding: 10px 15px;
  display: block;
  position: relative;
  z-index: 10;
  cursor: pointer;
  color: #227e93;
  text-decoration: none;
}
.list_menu_inner li a:hover {
  color: #345e67;
}
.list_menu_inner li a:active {
  color: #2c4e56;
}

/*-色指定2018.09.22-*/
.list_menu_inner li[class^="bg_col"] {
  /*-共通設定-*/
  background: #fff;
  border: none;
}
.list_menu_inner li.bg_col00:not(:hover):not(.hover)::before {
  background: #feb8bc;
  border-color: #f59499;
}
.list_menu_inner li.bg_col00:not(:hover):not(.hover) > a {
  color: #d16b70;
}
.list_menu_inner li.bg_col01:not(:hover):not(.hover)::before {
  background: #ffd8a2;
  border-color: #f4c17a;
}
.list_menu_inner li.bg_col01:not(:hover):not(.hover) > a {
  color: #b97e2c;
}
.list_menu_inner li.bg_col02:not(:hover):not(.hover)::before {
  background: #ffedb2;
  border-color: #f5ca3d;
}
.list_menu_inner li.bg_col02:not(:hover):not(.hover) > a {
  color: #a1821c;
}
.list_menu_inner li.bg_col03:not(:hover):not(.hover)::before {
  background: #fffccc;
  border-color: #ebdd00;
  background: #f9f38f;
}
.list_menu_inner li.bg_col03:not(:hover):not(.hover) > a {
  color: #8f8710;
}
.list_menu_inner li.bg_col04:not(:hover):not(.hover)::before {
  background: #bff2a6;
  border-color: #95d675;
}
.list_menu_inner li.bg_col04:not(:hover):not(.hover) > a {
  color: #5a8943;
}
.list_menu_inner li.bg_col05:not(:hover):not(.hover)::before {
  background: #c6f4d6;
  border-color: #79e59f;
}
.list_menu_inner li.bg_col05:not(:hover):not(.hover) > a {
  color: #4b9365;
}
.list_menu_inner li.bg_col06:not(:hover):not(.hover)::before {
  background: #c4e6f8;
  border-color: #8ac6e5;
}
.list_menu_inner li.bg_col06:not(:hover):not(.hover) > a {
  color: #457e9b;
}
.list_menu_inner li.bg_col07:not(:hover):not(.hover)::before {
  background: #bbcdfc;
  border-color: #94b0fa;
}
.list_menu_inner li.bg_col07:not(:hover):not(.hover) > a {
  color: #617abd;
}
.list_menu_inner li.bg_col08:not(:hover):not(.hover)::before {
  background: #d4c3fe;
  border-color: #b79bfd;
}
.list_menu_inner li.bg_col08:not(:hover):not(.hover) > a {
  color: #836dbb;
}
.list_menu_inner li.bg_col09:not(:hover):not(.hover)::before {
  background: #ecbde4;
  border-color: #d295c7;
}
.list_menu_inner li.bg_col09:not(:hover):not(.hover) > a {
  color: #95628b;
}
.list_menu_inner li.bg_col10:not(:hover):not(.hover)::before {
  background: #ecd8bc;
  border-color: #ccaf85;
}
.list_menu_inner li.bg_col10:not(:hover):not(.hover) > a {
  color: #a67e45;
}
.list_menu_inner li.bg_col11:not(:hover):not(.hover)::before {
  background: #d9d9d9;
  border-color: #b8b8b8;
}
.list_menu_inner li.bg_col11:not(:hover):not(.hover) > a {
  color: #7d7d7d;
}

.main_button.fix_style.b_count1 .list_button {
  min-height: 24%;
  width: 80%;
  margin: inherit 10%;
}
.main_button.fix_style.b_count1 .list_button.pos0 {
  left: 10%;
  top: 50%;
  margin-top: -6%;
}
.main_button.fix_style.b_count1 .list_button:nth-of-type(1) ~ .list_button {
  display: none;
}
.main_button.fix_style.b_count2 .list_button {
  min-height: 24%;
  width: 80%;
  margin: inherit 10%;
}
.main_button.fix_style.b_count2 .list_button.pos0 {
  left: 10%;
  top: 15%;
}
.main_button.fix_style.b_count2 .list_button.pos1 {
  left: 10%;
  top: 55%;
}
.main_button.fix_style.b_count2 .list_button:nth-of-type(2) ~ .list_button {
  display: none;
}
.main_button.fix_style.b_count3 .list_button {
  min-height: 24%;
  margin-top: 3%;
  width: 80%;
  margin: inherit 10%;
}
.main_button.fix_style.b_count3 .list_button.pos0 {
  left: 10%;
}
.main_button.fix_style.b_count3 .list_button.pos1 {
  top: 30%;
  left: 10%;
}
.main_button.fix_style.b_count3 .list_button.pos2 {
  top: 60%;
  left: 10%;
}
.main_button.fix_style.b_count3 .list_button:nth-of-type(3) ~ .list_button {
  display: none;
}
.main_button.fix_style.b_count4 .list_button {
  min-height: 28%;
}
.main_button.fix_style.b_count4 .list_button.pos0 {
  top: 15%;
}
.main_button.fix_style.b_count4 .list_button.pos1 {
  top: 15%;
}
.main_button.fix_style.b_count4 .list_button.pos2 {
  top: 55%;
}
.main_button.fix_style.b_count4 .list_button.pos3 {
  top: 55%;
}
.main_button.fix_style.b_count4 .list_button:nth-of-type(4) ~ .list_button {
  display: none;
}
.main_button.fix_style.b_count5 .list_button {
  min-height: 26%;
}
.main_button.fix_style.b_count5 .list_button.pos0 {
  top: 2%;
}
.main_button.fix_style.b_count5 .list_button.pos1 {
  top: 2%;
}
.main_button.fix_style.b_count5 .list_button.pos2 {
  top: 33%;
}
.main_button.fix_style.b_count5 .list_button.pos3 {
  top: 33%;
}
.main_button.fix_style.b_count5 .list_button.pos4 {
  bottom: auto;
  top: 65%;
}
.main_button.fix_style.b_count5 .list_button:nth-of-type(5) ~ .list_button {
  display: none;
}
.main_button.fix_style.b_count6 .list_button {
  min-height: 26%;
}
.main_button.fix_style.b_count6 .list_button.pos0 {
  top: 2%;
}
.main_button.fix_style.b_count6 .list_button.pos1 {
  top: 2%;
}
.main_button.fix_style.b_count6 .list_button.pos2 {
  top: 33%;
}
.main_button.fix_style.b_count6 .list_button.pos3 {
  top: 33%;
}
.main_button.fix_style.b_count6 .list_button.pos4 {
  bottom: auto;
  top: 65%;
}
.main_button.fix_style.b_count6 .list_button.pos5 {
  bottom: auto;
  top: 65%;
}
@media screen and (max-width: 640px) {
  .main_button.list_style {
    /*-$width_0640以下 -*/
  }
  .main_button.list_style.b_count4 .list_button, .main_button.list_style.b_count5 .list_button, .main_button.list_style.b_count6 .list_button {
    width: 45%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    height: 25%;
  }
  .main_button.list_style.b_count4 .list_button:nth-of-type(odd), .main_button.list_style.b_count5 .list_button:nth-of-type(odd), .main_button.list_style.b_count6 .list_button:nth-of-type(odd) {
    /*-奇数-*/
    float: left;
  }
  .main_button.list_style.b_count4 .list_button:nth-of-type(even), .main_button.list_style.b_count5 .list_button:nth-of-type(even), .main_button.list_style.b_count6 .list_button:nth-of-type(even) {
    /*-偶数-*/
    float: right;
  }
}
.main_button.list_style.b_count1 .list_style_inner {
  height: 90%;
}
.main_button.list_style.b_count1 .list_button {
  height: 28%;
  margin-top: 18%;
}
.main_button.list_style.b_count1 .list_button:nth-of-type(1) ~ .list_button {
  display: none;
}
.main_button.list_style.b_count2 .list_style_inner {
  height: 90%;
}
.main_button.list_style.b_count2 .list_button {
  height: 28%;
  margin-top: 6%;
}
.main_button.list_style.b_count2 .list_button:nth-of-type(2) ~ .list_button {
  display: none;
}
.main_button.list_style.b_count3 .list_style_inner {
  height: 90%;
}
.main_button.list_style.b_count3 .list_button {
  height: 24%;
  margin-top: 3%;
}
.main_button.list_style.b_count3 .list_button:nth-of-type(3) ~ .list_button {
  display: none;
}
.main_button.list_style.b_count4 .list_style_inner {
  height: 90%;
}
.main_button.list_style.b_count4 .list_button {
  height: 18%;
}
.main_button.list_style.b_count4 .list_button:nth-of-type(4) ~ .list_button {
  display: none;
}
@media screen and (max-width: 640px) {
  .main_button.list_style.b_count4 .list_button {
    /*-$width_0640以下 -*/
    height: 28%;
    margin-top: 3%;
  }
}
.main_button.list_style.b_count5 .list_style_inner {
  height: 90%;
}
.main_button.list_style.b_count5 .list_button {
  height: 15%;
}
@media screen and (max-width: 640px) {
  .main_button.list_style.b_count5 .list_button {
    /*-$width_0640以下 -*/
    height: 25%;
  }
}
.main_button.list_style.b_count5 .list_button:nth-of-type(5) ~ .list_button {
  display: none;
}
.main_button.list_style.b_count6 .list_style_inner {
  height: 80%;
}
@media screen and (max-width: 640px) {
  .main_button.list_style.b_count6 {
    /*-$width_0640以下 -*/
  }
  .main_button.list_style.b_count6 .list_button {
    height: 25%;
  }
}

.main_button {
  z-index: 1;
}
.main_button.list_style {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.main_button.list_style .list_button {
  width: 55%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 16px;
}
@media screen and (max-width: 640px) {
  .main_button.list_style .list_button {
    /*-$width_0640以下 -*/
    width: 70%;
  }
}
.main_button.list_style .list_button.pos6 {
  bottom: 15%;
  left: calc(50% - 27.5%);
  position: absolute;
}
@media screen and (max-width: 640px) {
  .main_button.list_style .list_button.pos6 {
    /*-$width_0640以下 -*/
    left: calc(50% - 35%);
  }
}
.main_button.fix_style {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.main_button.fix_style .list_button {
  position: absolute;
  width: 28%;
  height: 20%;
}
@media screen and (max-width: 640px) {
  .main_button.fix_style .list_button {
    /*-$width_0640以下 -*/
    width: 42%;
  }
}
.main_button.fix_style .list_button:before {
  -moz-box-shadow: 0px 2px 0 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 2px 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 0 2px rgba(0, 0, 0, 0.2);
}
.main_button.fix_style .list_button.pos0 {
  top: 0;
  left: 3%;
}
.main_button.fix_style .list_button.pos1 {
  top: 0;
  right: 3%;
}
.main_button.fix_style .list_button.pos2 {
  top: 36.2%;
  left: 3%;
}
.main_button.fix_style .list_button.pos3 {
  top: 36.2%;
  right: 3%;
}
.main_button.fix_style .list_button.pos4 {
  bottom: 5%;
  left: 3%;
}
.main_button.fix_style .list_button.pos5 {
  bottom: 5%;
  right: 3%;
}

.list_style_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.list_button {
  background-color: #fff;
  border-radius: 20px 5px;
  margin: 5px;
  position: relative;
  font-size: 120%;
  text-align: left;
  cursor: pointer;
  /*-2020.09.17 tableからflexへ変更 子要素のaのtable-cellも解除-*/
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
}
.list_button:before {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  content: "";
  background-color: #84d2e3;
  border: 1px solid #31b3d0;
  position: absolute;
  z-index: -1;
  border-radius: 5px;
  -moz-box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.2);
}
.list_button:hover, .list_button.hover, .list_button.select_b {
  /*-選択状態-*/
  color: #ff7834;
}
.list_button:hover:before, .list_button.hover:before, .list_button.select_b:before {
  /*-三角上-*/
  background-color: #ffe9b5;
  border-color: #ffa702;
}
.list_button:hover, .list_button.hover {
  background-color: #fff;
}
.list_button.select_b {
  /*-選択状態-*/
  background-color: #fffef5;
  cursor: auto;
}
.list_button.select_b:hover {
  background-color: #fffef5;
}
.list_button.select_b:before {
  /*-三角上-*/
}
.list_button.select_b:after {
  /*-三角下-*/
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ffca68;
}
.list_button a {
  margin: 0;
  padding: 5px;
  max-width: 96%;
  line-height: 1em;
  position: static;
}
.list_button a:before {
  /*-選択範囲拡張-*/
  content: "";
  display: block;
  position: absolute;
  /*- $sel_area はborder分 -*/
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border-radius: 5px;
  z-index: 1;
}

@media screen and (max-width: 800px) {
  /*-画面サイズが800px以下-*/
  .list_menu_inner p {
    /*-見出し-*/
    margin: 5px 0;
    padding: 5px;
    border-radius: 10px;
    font-size: 120%;
    min-width: 180px;
    max-width: 350px;
    width: 100%;
  }
  .list_menu_inner p:before {
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    border-radius: 12px / 50%;
  }
  .list_menu_inner p:after {
    top: 3px;
    right: 10px;
    bottom: 3px;
    left: 10px;
    border-radius: 8px / 50%;
  }
  .list_menu_inner li {
    margin-top: 5px;
    font-size: 100%;
    max-width: 90%;
    margin-left: auto;
  }
  .list_menu_inner li.select_b {
    /*-選択状態-*/
    margin-top: 5px;
    margin-bottom: 0px;
  }
  .list_menu_inner li.gray_b {
    /*-非選択状態-*/
  }
  .list_menu_inner li a {
    padding: 8px 6px;
  }
}
@media screen and (max-width: 420px) {
  /*-画面サイズが420px以下-*/
  .list_menu_inner li {
    max-width: none;
    margin-left: 0;
    margin-bottom: 7px;
  }
}
.list_menu_navi {
  /*-ボタン周り-*/
  width: 60px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  max-height: 300px;
  text-align: left;
  position: relative;
}
.list_menu_navi button {
  /*-ボタン共通設定-*/
  border: none;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  /*-文字を見えなくする-*/
  background-image: url(../img/list_menu_button2.png);
  background-color: rgba(255, 255, 255, 0);
}

.list_menu_up,
.list_menu_down,
.list_menu_ok {
  /*-上ボタン、下ボタン-、ＯＫボタン*/
}

.list_menu_up,
.list_menu_down {
  width: 63.33333%;
  height: 0;
  padding-top: 63.33333%;
  border-radius: 6px;
  -moz-background-size: 400% 247.36842%;
  -o-background-size: 400% 247.36842%;
  -webkit-background-size: 400% 247.36842%;
  background-size: 400% 247.36842%;
  position: absolute;
  left: 14%;
  /*-ＯＫボタンとの中心合わせ-*/
}
.list_menu_up:hover,
.list_menu_down:hover {
  -moz-transform: scale(0.95, 0.95);
  -ms-transform: scale(0.95, 0.95);
  -webkit-transform: scale(0.95, 0.95);
  transform: scale(0.95, 0.95);
}
.list_menu_up:active,
.list_menu_down:active {
  -moz-transform: scale(0.9, 0.9);
  -ms-transform: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
}

.list_menu_up {
  /*-上ボタン-*/
  background-position: 0 0;
  top: 0;
}
.list_menu_up:hover, .list_menu_up:active {
  background-position: 33.333% 0;
}

.list_menu_down {
  /*-下ボタン-*/
  background-position: 66.666% 0;
  bottom: 0;
}
.list_menu_down:hover, .list_menu_down:active {
  background-position: 100% 0;
}

.list_menu_ok {
  width: 93.33333%;
  height: 0;
  padding-top: 93.33333%;
  border-radius: 50%;
  background-position: 0 100%;
  -moz-background-size: 271.42857% 167.85714%;
  -o-background-size: 271.42857% 167.85714%;
  -webkit-background-size: 271.42857% 167.85714%;
  background-size: 271.42857% 167.85714%;
  display: inline-block;
  vertical-align: middle;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.list_menu_ok:hover {
  -moz-transform: translateY(-50%) scale(0.95);
  -ms-transform: translateY(-50%) scale(0.95);
  -webkit-transform: translateY(-50%) scale(0.95);
  transform: translateY(-50%) scale(0.95);
}
.list_menu_ok:active {
  -moz-transform: translateY(-50%) scale(0.9);
  -ms-transform: translateY(-50%) scale(0.9);
  -webkit-transform: translateY(-50%) scale(0.9);
  transform: translateY(-50%) scale(0.9);
}
.list_menu_ok:hover, .list_menu_ok:active {
  background-position: 58.6% 100%;
}

@media screen and (max-width: 640px) {
  /*-画面サイズが640px以下-*/
  .main_button.list_style .list_button {
    margin-top: 8px;
    margin-bottom: 10px;
  }

  .list_button a {
    padding: 3px 5px;
  }
}
@media screen and (max-width: 420px) {
  /*-画面サイズが420px以下-*/
  .list_menu_navi {
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 40px;
  }
}
/*-タイマー設定-*/
.timer_wrpper {
  /*-可変ＯＫ-*/
  width: 160px;
  height: 160px;
  position: relative;
  background-image: url(../img/timer_parts.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.timer_wrpper:before {
  /*-目盛り-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../img/timer_parts.png);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 3;
}

.timer_text {
  position: absolute;
  z-index: 10;
  height: 0;
  padding-top: 20%;
  left: 5%;
  right: 5%;
  text-shadow: -1px 1px 2px #fff, 1px 1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff;
}
.timer_text .p1 {
  font-size: 100%;
  text-align: center;
  line-height: 2;
  width: 100%;
  margin-top: 3%;
}
.timer_text .p2 {
  font-size: 90%;
  text-align: center;
  line-height: 1;
  width: 100%;
}
.timer_text .p2 span {
  /*-数字-*/
  font-size: 200%;
  font-weight: bold;
}

.timer_set {
  /*-円本体-*/
  position: absolute;
  top: 15%;
  left: 16%;
  right: 16%;
  bottom: 17%;
  margin: 0;
  border-radius: 999px;
  background-color: #ddd;
  background-color: transparent;
  overflow: hidden;
}
.timer_set:after, .timer_set:before {
  /*-マスク用円（共通）-*/
  content: "";
  position: absolute;
  display: block;
  border-radius: 999px;
  z-index: 3;
}
.timer_set:before {
  /*-マスク用円（白）-*/
  top: 18%;
  left: 19%;
  right: 19%;
  bottom: 20%;
  background-color: #fff;
}
.timer_set:after {
  /*-マスク用円（灰線）-*/
  top: 21%;
  left: 22%;
  right: 22%;
  bottom: 23%;
  border: 3px solid #eee;
}

.timer_set > span {
  /*-メーター-*/
  position: absolute;
  height: 100%;
  width: 50%;
  overflow: hidden;
}

.timer_left {
  left: 0;
}

.timer_right {
  left: 50%;
}

.timer_ruler {
  /*-進行状況メーター-*/
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background-color: #9cf7ae;
  transition: all 0.3s ease;
  -moz-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}

/*-180度越えるまでは非表示-*/
.deg30 .timer_left, .deg60 .timer_left, .deg90 .timer_left, .deg120 .timer_left, .deg150 .timer_left, .deg180 .timer_left {
  display: none;
}

.deg30 .timer_right .timer_ruler {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.deg60 .timer_right .timer_ruler {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.deg90 .timer_right .timer_ruler {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.deg120 .timer_right .timer_ruler {
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}

.deg150 .timer_right .timer_ruler {
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}

.deg180 .timer_right .timer_ruler {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*-180度越えたら右は固定-*/
.deg_right .timer_right .timer_ruler, .deg210 .timer_right .timer_ruler, .deg240 .timer_right .timer_ruler, .deg270 .timer_right .timer_ruler, .deg300 .timer_right .timer_ruler, .deg330 .timer_right .timer_ruler, .deg360 .timer_right .timer_ruler {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*-180度超え-*/
.deg210 .timer_left .timer_ruler {
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.deg240 .timer_left .timer_ruler {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.deg270 .timer_left .timer_ruler {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.deg300 .timer_left .timer_ruler {
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}

.deg330 .timer_left .timer_ruler {
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}

.deg360 .timer_left .timer_ruler {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.timer_left .timer_ruler {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.timer_right .timer_ruler {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  left: -100%;
  -webkit-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
}

/*-ローディング用-*/
.now_loading:before {
  /*-目盛り-*/
  display: none;
}
.now_loading .timer_set {
  background-color: #f0f0f0;
}
.now_loading .timer_set > span {
  -webkit-animation: rotate_ani 1.2s linear infinite;
  -moz-animation: rotate_ani 1.2s linear infinite;
  animation: rotate_ani 1.2s linear infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -moz-transform-origin: 0% 50% 0;
  -webkit-transform-origin: 0% 50% 0;
  transform-origin: 0% 50% 0;
}
.now_loading .timer_set:before {
  /*-マスク用円（白）-*/
  top: 5%;
  left: 6%;
  right: 6%;
  bottom: 7%;
  background-color: #fff;
}
.now_loading .timer_set:after {
  /*-マスク用円（灰線）-*/
  display: none;
}
.now_loading .timer_left {
  display: none;
}
.now_loading .timer_right .timer_ruler {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.now_loading .timer_ruler {
  /*-進行状況メーター-*/
  background-color: rgba(156, 247, 217, 0.8);
}

/*-回転アニメーション-*/
@-webkit-keyframes rotate_ani {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate_ani {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate_ani {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*-単品パーツ-*/
.chara_base {
  /*-キャラ顔-*/
  display: block;
  border: none;
  height: 128px;
  width: 128px;
  border-radius: 10px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RmZjVhZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dff5ad));
  background-image: -moz-linear-gradient(top, #ffffff, #dff5ad);
  background-image: -webkit-linear-gradient(top, #ffffff, #dff5ad);
  background-image: linear-gradient(to bottom, #ffffff, #dff5ad);
  border: 2px solid #c9ea84;
  position: relative;
  z-index: 10;
}
.chara_base:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #fff;
  border-radius: 8px;
}
.chara_base.size_m {
  width: 96px;
  height: 96px;
}

.chara_base2 {
  /*-キャラ顔-*/
  display: block;
  border: none;
  height: 128px;
  width: 128px;
  border-radius: 10% / 50%;
  background-color: #fff;
  position: relative;
  z-index: 0;
  -moz-box-shadow: 0px 2px 0px 1px rgba(68, 68, 68, 0.12);
  -webkit-box-shadow: 0px 2px 0px 1px rgba(68, 68, 68, 0.12);
  box-shadow: 0px 2px 0px 1px rgba(68, 68, 68, 0.12);
  overflow: hidden;
}
.chara_base2:after {
  /*-枠-*/
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 3px solid #cbe979;
  border-radius: 10% / 50%;
}
.chara_base2.size_m_old {
  width: 96px;
  height: 80px;
}
.chara_base2.size_m_old img {
  height: 72px;
  width: auto;
  position: absolute;
  bottom: 7px;
  left: 50%;
  margin-left: -36px;
  z-index: 10;
}
.chara_base2.size_m {
  width: 80px;
  height: 64px;
}
.chara_base2.size_m img {
  height: 56px;
  /*-枠の高さから8を引いた数値-*/
  width: auto;
  position: absolute;
  bottom: 7px;
  left: 50%;
  margin-left: -28px;
  /*-imgサイズの半分（ここでは56px / 2）-*/
  z-index: 10;
}
.chara_base2.size_m:after {
  /*-枠-*/
  border: 3px solid #cbe979;
}
.chara_base2.size_m > div {
  /*- 2019.02.22追加 アバターバージョン -*/
  display: block;
  position: absolute;
  width: 120px;
  height: 120px;
  top: 1px;
  left: 12px;
  z-index: 1;
  overflow: hidden;
  -moz-transform: scale(0.46667, 0.46667);
  -ms-transform: scale(0.46667, 0.46667);
  -webkit-transform: scale(0.46667, 0.46667);
  transform: scale(0.46667, 0.46667);
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.chara_base2.size_m > div img {
  height: auto;
  width: auto;
  margin-left: 0;
  bottom: inherit;
}

.chara_base2_groupe {
  /*-キャラグループ-*/
  display: block;
  border: none;
  height: 72px;
  width: 80px;
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  z-index: 0;
  -moz-box-shadow: 0px 2px 0px 0 rgba(68, 68, 68, 0.12);
  -webkit-box-shadow: 0px 2px 0px 0 rgba(68, 68, 68, 0.12);
  box-shadow: 0px 2px 0px 0 rgba(68, 68, 68, 0.12);
  overflow: hidden;
  border: 1px solid #e5e5e5;
}
.chara_base2_groupe ul {
  /*-グループ用-*/
  position: relative;
  margin: 2px 3px 0;
  font-size: 0;
}
.chara_base2_groupe ul img {
  width: 90%;
}
.chara_base2_groupe li {
  display: inline-block;
  position: relative;
  text-align: center;
}
.chara_base2_groupe li:empty:before {
  /*-座布団背景カラー-*/
  background-color: #e5e5e5;
}
.chara_base2_groupe li:empty:after {
  /*-ダミー用人-*/
  content: "";
  width: 90%;
  padding-top: 90%;
  display: inline-block;
  background-image: url(../img/nullicon.png);
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.chara_base2_groupe li:before {
  /*-座布団背景カラー-*/
  content: "";
  display: block;
  background-color: #d4ed8f;
  border-radius: 3px;
  position: absolute;
  width: 100%;
  z-index: -1;
  height: 0;
  padding-top: 90%;
}
.chara_base2_groupe.piece4 li {
  width: calc(50% - 4px);
  margin: 2px;
}
.chara_base2_groupe.piece4 li:before {
  border-radius: 4px;
}
.chara_base2_groupe.piece9 li {
  width: calc(33.33% - 4px);
  margin: 2px;
}
.chara_base2_groupe.piece9 li:before {
  border-radius: 2px;
}

.chara_base3 {
  /*-キャラ顔-*/
  display: block;
  position: relative;
  z-index: auto;
  text-align: center;
  margin: 20px;
}
.chara_base3:after, .chara_base3:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  border-radius: 10px;
}
.chara_base3:before {
  /*-枠-*/
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  background-color: #fff;
  border: 2px solid #efe8d7;
  border-radius: 14px;
}
.chara_base3:after {
  /*-背景-*/
  background-color: #d3ee9a;
  -moz-box-shadow: inset 3px 8px 10px 5px rgba(163, 219, 45, 0.2);
  -webkit-box-shadow: inset 3px 8px 10px 5px rgba(163, 219, 45, 0.2);
  box-shadow: inset 3px 8px 10px 5px rgba(163, 219, 45, 0.2);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.chara_base3 img {
  width: 50%;
  z-index: 5;
  position: relative;
  vertical-align: top;
}
.chara_base3 > * {
  z-index: 5;
  position: relative;
}

button.icon_body, button.icon_music {
  position: absolute;
  z-index: 5;
  bottom: 0;
  background-image: url(../img/face_icon_button.png);
  background-repeat: no-repeat;
  -moz-background-size: 200% 100%;
  -o-background-size: 200% 100%;
  -webkit-background-size: 200% 100%;
  background-size: 200% 100%;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  width: 36px;
  height: 28px;
  border-radius: 8px;
  bottom: -3px;
}
button.icon_body {
  right: -3px;
  background-position: 100% 0;
}
button.icon_music {
  left: -3px;
  background-position: 0 0;
}

.pink_skin button.icon_body, .pink_skin button.icon_music,
.cyan_skin button.icon_body,
.cyan_skin button.icon_music,
button.icon_body,
button.icon_music {
  background-color: #fff;
  border: 2px solid #e6dbc1;
}
.pink_skin button.icon_body:after, .pink_skin button.icon_music:after,
.cyan_skin button.icon_body:after,
.cyan_skin button.icon_music:after,
button.icon_body:after,
button.icon_music:after {
  content: "";
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
}
.pink_skin button.icon_body:hover, .pink_skin button.icon_music:hover,
.cyan_skin button.icon_body:hover,
.cyan_skin button.icon_music:hover,
button.icon_body:hover,
button.icon_music:hover {
  border-color: #f3ede0;
  opacity: 0.8;
}
.pink_skin button.icon_body:hover:after, .pink_skin button.icon_music:hover:after,
.cyan_skin button.icon_body:hover:after,
.cyan_skin button.icon_music:hover:after,
button.icon_body:hover:after,
button.icon_music:hover:after {
  position: absolute;
  opacity: 0.7;
}
.pink_skin button.icon_body:active, .pink_skin button.icon_music:active,
.cyan_skin button.icon_body:active,
.cyan_skin button.icon_music:active,
button.icon_body:active,
button.icon_music:active {
  border-color: #fff;
  opacity: 1;
}
.pink_skin button.icon_body:active:after, .pink_skin button.icon_music:active:after,
.cyan_skin button.icon_body:active:after,
.cyan_skin button.icon_music:active:after,
button.icon_body:active:after,
button.icon_music:active:after {
  position: absolute;
  opacity: 1;
}

.title_area {
  /*-タイトル-*/
}
.title_area p {
  display: inline-block;
  background: #5D9839;
  margin: 0;
  color: #fff;
  border-radius: 15px 15px 0 0;
  padding: 3px 10px;
  border: 2px solid #c9ea84;
  border-bottom: 0;
  letter-spacing: 1px;
  text-decoration: none;
  font-weight: bold;
}

.text_area {
  /*-テキストエリア-*/
  padding: 10px 20px;
  /*-外周-*/
  position: relative;
  border-radius: 10px;
  background-color: #c9ea84;
  border: 1px solid #adda90;
}
.text_area:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  background-color: #effad7;
  border-radius: 10px;
  z-index: 0;
}
.text_area:after {
  /*-ベース-*/
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 20px;
  z-index: 1;
}
.text_area > * {
  position: relative;
  z-index: 30;
}

/*-フレーム構造-*/
.common_flame {
  display: table;
  margin: 10px 0;
  font-size: 120%;
}
.common_flame > div {
  display: table-cell;
  vertical-align: top;
}
.common_flame > div:only-of-type .title_area {
  margin-bottom: -10px;
}
.common_flame > div:only-of-type .title_area p {
  padding-bottom: 15px;
}

/*--吹き出ししかない時（アイテム一覧のプレゼント用）--*/
.common_flame .flame_stretch.flame_balloon:only-child .balloon_tip {
  /*-吹き出し先-*/
  top: 5px;
  left: -23px;
}

.flame_stretch {
  width: 100%;
}

.flame_l {
  width: auto;
}

.flame_r {
  width: auto;
}

/*-両方重ね-*/
.left_right_up .title_area p,
.left_right_up .text_area {
  margin-left: -30px;
  padding-left: 35px;
  margin-right: -30px;
  padding-right: 35px;
}
.left_right_up .flame_stretch + .flame_r {
  padding-left: 10px;
}

/*-左重ね-*/
.left_up .title_area p,
.left_up .text_area {
  margin-left: -30px;
  padding-left: 35px;
}
.left_up .flame_stretch + .flame_r {
  padding-left: 10px;
}

/*-右重ね-*/
.right_up .title_area p,
.right_up .text_area {
  margin-right: -30px;
  padding-right: 35px;
}
.right_up .title_area {
  text-align: right;
}
.right_up .flame_l + .flame_stretch {
  padding-left: 10px;
}

.flame_balloon {
  padding: 0 10px 0;
  position: relative;
  z-index: 10;
}

div:not(.reply_balloon_div) > .common_flame {
  /*- 2019.02.13 GM返信機能用に調整 -*/
  vertical-align: bottom !important;
}

/*-吹き出し-*/
.balloon_body {
  border-radius: 1.3em;
  background: #b3b3b3;
  margin: 0px -5px 0;
  padding: 1.3em;
  font-size: 90%;
  display: inline-block;
  position: relative;
  -moz-box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
  -webkit-box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
  box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
}
.balloon_body > * {
  position: relative;
  z-index: 10;
  /*-どこでも改行-*/
  word-break: break-all;
}
.balloon_body:before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-color: #fff;
  border-radius: 1.3em;
}
.balloon_body .close_bx {
  position: absolute;
  top: -4px;
}
.balloon_body .close_bx:not(.master) {
  right: 3%;
}
.balloon_body .close_bx:hover {
  opacity: 1;
  background-color: #a9a9a9;
}
.balloon_body .close_bx.master {
  left: 3%;
}
.balloon_body .close_bx.master:hover {
  background-color: #cc0000;
}
.balloon_body .script.normal_b {
  min-height: inherit;
  padding: 5px 10px;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 0;
}

/*-通報枠 2018.09.03-*/
.balloon_body .user_bottom {
  width: auto;
  max-width: 300px;
  display: block;
  border-radius: 0 0 6px 6px;
  padding: 3px 1px;
  margin: -3px 0 3px;
  position: relative;
  text-align: center;
  float: none;
  font-size: 0;
}
.balloon_body .mini_b2 {
  width: 48%;
  width: calc(49% - 2px);
  min-width: 120px;
  margin: 0.5%;
}

@media screen and (max-width: 320px) {
  .balloon_body .mini_b2 {
    width: 98%;
    width: calc(99% - 2px);
    min-width: 0;
  }
}
/*-吹き出し(角丸)-*/
.rounded {
  border-radius: 10px;
  padding: 10px;
  display: block;
}
.rounded:before {
  border-radius: 10px;
}
.rounded .balloon_head {
  margin-left: 0px;
  margin-right: 0px;
}

/*-チャット用吹き出し、日付が無い分、角丸を調整-*/
.balloon_arrow_r .balloon_body,
.balloon_arrow_l .balloon_body {
  border-radius: 1.1em;
  padding-left: 1em;
  padding-right: 1em;
}
.balloon_arrow_r .balloon_body:before,
.balloon_arrow_l .balloon_body:before {
  border-radius: 1.1em;
}

/*-チャット用吹き出し、返信ボタン位置調整-*/
.res_b p:after {
  /*-返信用ボタンスペース-*/
  content: "";
  display: inline-block;
  width: 50px;
  height: 1px;
}
.res_b .flatR_b {
  /*-返信用ボタン-*/
  position: absolute;
  right: 10px;
  bottom: 0;
}
.res_b:not(:hover) .flatR_b {
  /*-返信用ボタン-*/
  background-color: transparent;
  border: 1px solid #808080;
  color: #808080;
  opacity: 0.3;
}

/*-三角がないときのチャット用吹き出し、返信ボタン位置調整-*/
.chat:not(.balloon_arrow_r):not(.balloon_arrow_l) .res_b .flatR_b {
  /*-返信用ボタン-*/
  right: 20px;
}

.balloon_head {
  /*-吹き出し内の投稿時間	などの表示-*/
  font-size: 90%;
  display: block;
  margin: -0.8em 0 0.4em;
  text-align: left;
  letter-spacing: -0.02em;
  color: #a9a9a9;
}
.balloon_head span {
  display: inline-block;
}
.balloon_head .balloon_name {
  margin: 0;
  padding: 0 5px;
  color: #86be03;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.balloon_head .balloon_data {
  color: #bfbfbf;
  margin-left: 1em;
  letter-spacing: -0.1em;
  font-size: 90%;
}

.balloon_tip {
  /*-吹き出し先っぽ-*/
  display: inline-block;
  width: 80px;
  height: 32px;
  position: absolute;
  top: 30px;
  left: -20px;
}
.balloon_tip:before, .balloon_tip:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../img/balloon_tip2.png");
  -moz-background-size: 80px 320px;
  -o-background-size: 80px 320px;
  -webkit-background-size: 80px 320px;
  background-size: 80px 320px;
}
.balloon_tip:before {
  background-position: 0 -32px;
  z-index: -1;
}
.balloon_tip:after {
  background-position: 0 0;
  z-index: 1;
}

.flame_balloon {
  /*-吹き出し先っぽ色変え-*/
}
.flame_balloon.cyan_skin .balloon_tip {
  /*-吹き出し先っぽ-*/
}
.flame_balloon.cyan_skin .balloon_tip:after {
  background-position: 0 -64px;
}
.flame_balloon.cyan_skin .balloon_tip:before {
  background-position: 0 -96px;
}
.flame_balloon.cyan_skin .balloon_body {
  /*-吹き出し線*/
  background-color: #6adcdc;
  color: #218c8c;
}
.flame_balloon.cyan_skin .balloon_body:before {
  /*-吹き出しベースカラー*/
  background-color: #dbf9f9;
}
.flame_balloon.cyan_skin .balloon_body:after {
  /*-吹き出し縦線カラー*/
  background-color: #bcefef;
}
.flame_balloon.cyan_skin .script.normal_b {
  background-color: #6adcdc;
  border-bottom-color: #2cbdbd;
  border-bottom-color: #53b0b0;
}
.flame_balloon.pink_skin .balloon_tip {
  /*-吹き出し先っぽ-*/
}
.flame_balloon.pink_skin .balloon_tip:after {
  background-position: 0 -128px;
}
.flame_balloon.pink_skin .balloon_tip:before {
  background-position: 0 -160px;
}
.flame_balloon.pink_skin .balloon_body {
  /*-吹き出し線*/
  background-color: #f68cca;
  color: #ce358e;
}
.flame_balloon.pink_skin .balloon_body:before {
  /*-吹き出しベースカラー*/
  background-color: #fddcef;
}
.flame_balloon.pink_skin .balloon_body:after {
  /*-吹き出し縦線カラー*/
  background-color: #fbcae6;
}
.flame_balloon.pink_skin .script.normal_b {
  background-color: #f68cca;
  border-bottom-color: #da66a9;
}
.flame_balloon.green_skin .balloon_tip {
  /*-吹き出し先っぽ-*/
}
.flame_balloon.green_skin .balloon_tip:after {
  background-position: 0 -192px;
}
.flame_balloon.green_skin .balloon_tip:before {
  background-position: 0 -224px;
}
.flame_balloon.green_skin .balloon_body {
  /*-吹き出し線*/
  background-color: #95d209;
  color: #638f00;
}
.flame_balloon.green_skin .balloon_body:before {
  /*-吹き出しベースカラー*/
  background-color: #eeffc7;
}
.flame_balloon.green_skin .balloon_body:after {
  /*-吹き出し縦線カラー*/
  background-color: #cbf862;
}
.flame_balloon.green_skin .script.normal_b {
  background-color: #95d209;
  border-bottom-color: #79ad00;
}
.flame_balloon.gray_skin .balloon_tip {
  /*-吹き出し先っぽ-*/
}
.flame_balloon.gray_skin .balloon_tip:after {
  background-position: 0 -256px;
}
.flame_balloon.gray_skin .balloon_tip:before {
  background-position: 0 -288px;
}
.flame_balloon.gray_skin .balloon_body {
  /*-吹き出し線*/
  background-color: #b3b3b3;
  color: #676767;
}
.flame_balloon.gray_skin .balloon_body:before {
  /*-吹き出しベースカラー*/
  background-color: #f2f2f2;
}
.flame_balloon.gray_skin .balloon_body:after {
  /*-吹き出し縦線カラー*/
  background-color: #d9d9d9;
}
.flame_balloon.gray_skin .script.normal_b {
  background-color: #b3b3b3;
  border-bottom-color: #929292;
}

.gray_skin .flatR_b {
  background-color: #b3b3b3;
}

.tip_right {
  /*-先っぽ右-*/
  text-align: right;
}
.tip_right > * {
  text-align: left;
}
.tip_right > .balloon_tip {
  left: auto;
  right: -20px;
  text-align: left;
}
.tip_right > .balloon_tip:before, .tip_right > .balloon_tip:after {
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.balloon_arrow_r .balloon_body {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  right: 0;
  padding-right: 10px;
  display: block;
  margin-right: 32px;
}
.balloon_arrow_r .balloon_body:before {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  right: 1px;
}
.balloon_arrow_r .balloon_body:after {
  content: "";
  display: block;
  position: absolute;
  top: 15%;
  bottom: 15%;
  right: 0;
  width: 2px;
  z-index: 10;
  background-color: #eee;
}
.balloon_arrow_r .flame_r {
  vertical-align: middle;
}

.balloon_arrow_l .balloon_body {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  right: 0;
  padding-left: 10px;
  display: block;
  margin-left: 32px;
}
.balloon_arrow_l .balloon_body:before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  right: 1px;
}
.balloon_arrow_l .balloon_body:after {
  content: "";
  display: block;
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 2px;
  z-index: 10;
  background-color: #eee;
}
.balloon_arrow_l .flame_l {
  vertical-align: middle;
}

/*-吹き出し方向 左右先-*/
.arrow_base {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  /*-下矢印-*/
  background-image: url("../img/balloon_allow2.png");
  -moz-background-size: 1000% 100%;
  -o-background-size: 1000% 100%;
  -webkit-background-size: 1000% 100%;
  background-size: 1000% 100%;
  background-repeat: no-repeat;
}
.arrow_base:before, .arrow_base:after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
}
.arrow_base:before {
  /*-上矢印-*/
  background-image: url("../img/balloon_allow2.png");
  -moz-background-size: 1000% 100%;
  -o-background-size: 1000% 100%;
  -webkit-background-size: 1000% 100%;
  background-size: 1000% 100%;
  background-repeat: no-repeat;
  background-position: 11.11111% 0;
  left: 0;
  right: 1px;
  margin-left: -2px;
}
.arrow_base:after {
  /*-上下線-*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  left: 0;
  width: 14px;
  margin-left: -4px;
}

.flame_balloon {
  /*-吹き出し先っぽ色変え-*/
}
.flame_balloon.cyan_skin {
  /*-吹き出し方向 左右先-*/
}
.flame_balloon.cyan_skin .arrow_base {
  background-position: 22.22222% 0;
  /*-下矢印-*/
}
.flame_balloon.cyan_skin .arrow_base:before {
  /*-上矢印-*/
  background-position: 33.33333% 0;
}
.flame_balloon.cyan_skin .arrow_base:after {
  /*-上下線-*/
  border-color: #6adcdc;
}
.flame_balloon.pink_skin {
  /*-吹き出し方向 左右先-*/
}
.flame_balloon.pink_skin .arrow_base {
  background-position: 44.44444% 0;
  /*-下矢印-*/
}
.flame_balloon.pink_skin .arrow_base:before {
  /*-上矢印-*/
  background-position: 55.55556% 0;
}
.flame_balloon.pink_skin .arrow_base:after {
  /*-上下線-*/
  border-color: #f68cca;
}
.flame_balloon.green_skin {
  /*-吹き出し方向 左右先-*/
}
.flame_balloon.green_skin .arrow_base {
  background-position: 66.66667% 0;
  /*-下矢印-*/
}
.flame_balloon.green_skin .arrow_base:before {
  /*-上矢印-*/
  background-position: 77.77778% 0;
}
.flame_balloon.green_skin .arrow_base:after {
  /*-上下線-*/
  border-color: #95d209;
}
.flame_balloon.gray_skin {
  /*-吹き出し方向 左右先-*/
}
.flame_balloon.gray_skin .arrow_base {
  background-position: 88.88889% 0;
  /*-下矢印-*/
}
.flame_balloon.gray_skin .arrow_base:before {
  /*-上矢印-*/
  background-position: 100% 0;
}
.flame_balloon.gray_skin .arrow_base:after {
  /*-上下線-*/
  border-color: #b3b3b3;
}

.balloon_arrow_r .balloon_option {
  text-align: left;
}
.balloon_arrow_r .arrow_base {
  left: 100%;
  margin-left: -10px;
}

.balloon_arrow_l .balloon_option {
  text-align: right;
}
.balloon_arrow_l .arrow_base {
  /*-反転処理-*/
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  right: 100%;
  margin-right: -10px;
}

.balloon_option p {
  letter-spacing: -0.05em;
}
.balloon_option input[type="text"] {
  width: 100%;
  border-color: #d9d9d9;
  background-color: #fafafa;
}
.balloon_option .normal_b_div button:first-of-type {
  margin-right: 5px;
}

/*-2019.02.13追加GM返信▼-*/
/*- GM返信 -*/
/*- 2019.02.13 返信用コメントを追加するにあたって上の階層から調整する必要が出てきた -*/
/*- comment_replyは返信用class -*/
.common_flame.comment_reply .flame_stretch.flame_balloon {
  /*-.flame_stretchのwidth:100％;を無効にするためだけのcomment_reply-*/
  /*-これで適切なサイズで調整されて100%時のコメントが常に右端に配置されてしまい返信かどうかわからなくなる状態を避けられる-*/
  width: auto;
}
.common_flame.comment_reply:not(.comment_right) .common_flame {
  /*-吹き出し 自動的に調整されたサイズの中で右固定-*/
  margin-left: auto;
}
.common_flame.comment_reply.comment_right {
  /*- width:100%でなくautoの自動サイズ調整で右に配置するため -*/
  margin-left: auto;
}

/*- GM返信フォーム -*/
.reply_form {
  background-color: #b3b3b3;
  padding: 8px;
  border-radius: 0 8px 8px 8px;
  max-width: 380px;
  position: relative;
}
.reply_form input {
  width: 40%;
  width: calc(100% / 2 - 32px);
  min-width: 100px;
  margin: 2px;
}
.reply_form input:last-of-type {
  /*-コメント入力用-*/
  width: 84%;
  width: calc(100% - 55px);
}
.reply_form:not(.parts_none) {
  /*- 通常時（.parts_none時は除く） -*/
  margin-top: 20px;
}
.reply_form:not(.parts_none) button.mark_b {
  position: absolute;
  left: 0;
  top: -16px;
}
.reply_form.parts_none {
  /*- parts_none時(button.mark_b以外は非表示) -*/
  background-color: transparent;
  padding: 0;
  margin-bottom: 5px;
}
.reply_form.parts_none > *:not(.mark_b) {
  display: none;
}
.reply_form.parts_none button.mark_b {
  display: block;
  position: relative;
  margin-bottom: -5px;
  margin-top: 2px;
  margin-left: 10px;
}

/*- GM返信吹き出し -*/
.reply_balloon_div .common_flame {
  font-size: 100%;
  /*-common_flameの中のcommon_flameという事でfont-size:120％を二度掛けて文字が大きくなるのを防ぐため-*/
  margin-top: -14px;
  margin-bottom: 0;
}
.reply_balloon_div .common_flame .flame_balloon {
  vertical-align: top;
}
.reply_balloon_div .common_flame .balloon_body {
  /*-重なる上部にも影付け-*/
  margin-top: 6px;
  min-width: 100px;
  -moz-box-shadow: 0px 1px 0px 1px rgba(77, 77, 77, 0.1), 0px -1px 0px 1px rgba(77, 77, 77, 0.08);
  -webkit-box-shadow: 0px 1px 0px 1px rgba(77, 77, 77, 0.1), 0px -1px 0px 1px rgba(77, 77, 77, 0.08);
  box-shadow: 0px 1px 0px 1px rgba(77, 77, 77, 0.1), 0px -1px 0px 1px rgba(77, 77, 77, 0.08);
}
.reply_balloon_div .common_flame .chara_base2 {
  /*-重なる上部にも影付け-*/
  -moz-box-shadow: 0px 2px 0px 1px rgba(77, 77, 77, 0.12), 0px -1px 0px 1px rgba(77, 77, 77, 0.1);
  -webkit-box-shadow: 0px 2px 0px 1px rgba(77, 77, 77, 0.12), 0px -1px 0px 1px rgba(77, 77, 77, 0.1);
  box-shadow: 0px 2px 0px 1px rgba(77, 77, 77, 0.12), 0px -1px 0px 1px rgba(77, 77, 77, 0.1);
}

/*-2019.02.13追加GM返信▲-*/
.list_menu2_flame {
  background-color: #d8f49a;
  padding: 5px;
  margin: 5px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  display: table;
}
.list_menu2_flame:before {
  /*-背景模様-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #c5e971;
  z-index: -1;
  border-radius: 100px 6px 100px 6px;
}
.list_menu2_flame .list_menu2_wrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.list_menu2_flame .normal_b_div {
  display: table-cell;
  vertical-align: top;
  padding: 10px 0;
  width: 120px;
}
.list_menu2_flame .normal_b_div button {
  color: #506a15;
  color: #999;
  background-color: #fff;
  margin: 5px;
  width: 100px;
  border-color: #bbb;
}

.list_menu2 {
  height: 200px;
  overflow: auto;
  background-color: #97c828;
  border-top: 2px solid #8ab725;
  border-bottom: 2px solid #8ab725;
  margin: 10px;
  border-radius: 5px;
}
.list_menu2 li {
  border: 1px solid #fff;
  border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px;
  position: relative;
  text-align: left;
  overflow: hidden;
  margin: 3px;
}
.list_menu2 li > span {
  display: block;
  padding: 3px;
}
.list_menu2 li a {
  display: block;
  padding: 3px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  /*-削除ボタン分のスペース-*/
  width: calc(100% -20px);
}
.list_menu2 li:first-child {
  margin-top: 1px;
}
.list_menu2 li:last-child {
  margin-bottom: 1px;
}
.list_menu2 li:nth-child(even) {
  background-color: #e9f6ca;
}
.list_menu2 li:nth-child(odd) {
  background-color: #fff;
}
.list_menu2 li:hover {
  background-color: #72ddf6;
  border-color: #90e7fb;
}
.list_menu2 li:hover:before, .list_menu2 li:hover:after {
  display: none;
}
.list_menu2 li:hover a {
  color: #fff;
}
.list_menu2 li.select {
  /*-選択状態-*/
  cursor: auto;
  border-color: transparent;
  border-top-color: #71951e;
  border-bottom-color: #71951e;
  background-color: #72a107;
}
.list_menu2 li.select:before, .list_menu2 li.select:after {
  display: none;
}
.list_menu2 li.select a {
  color: #fff;
}
.list_menu2 li.select span {
  color: #fff;
}
.list_menu2 .close_bx {
  /*-削除ボタン-*/
  background-color: #a9dd31;
  opacity: 0.8;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 5;
}
.list_menu2 .close_bx:not(.master) {
  right: 0;
}
.list_menu2 .close_bx:hover {
  background-color: #6c9018;
  opacity: 1;
}
.list_menu2 .close_bx.master {
  left: 0;
}
.list_menu2 .close_bx.master:hover {
  background-color: #cc0000;
}

.mini_b {
  border: none;
  border-color: transparent;
  height: auto;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 100%;
  min-height: 22px;
  display: inline-block;
  margin: 0;
}
.mini_b:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.mini_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.mini_b.gray_b, .mini_b.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.mini_b.gray_b:hover, .mini_b.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.mini_b.gray_b:active, .mini_b.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.mini_b:active {
  position: relative;
  top: 1px;
}

.mini_b2 {
  border: none;
  border-color: transparent;
  background-color: #fff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iI2VmZWNlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ffffff), color-stop(92%, #efece6));
  background-image: -moz-linear-gradient(top, #ffffff 30%, #efece6 92%);
  background-image: -webkit-linear-gradient(top, #ffffff 30%, #efece6 92%);
  background-image: linear-gradient(to bottom, #ffffff 30%, #efece6 92%);
  border: 1px solid #b1a486;
  height: auto;
  text-align: center;
  line-height: 100%;
  min-height: 22px;
  display: inline-block;
  margin: 0;
  border-radius: 4px 4px 5px 5px;
  color: #8f7f5c;
  font-size: 12px;
  padding: 3px;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
}
.mini_b2:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.mini_b2:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.mini_b2.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.mini_b2.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.mini_b2.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.mini_b2.black {
  background-color: #4D4D4D;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiM2NjY2NjYiLz48c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #666666), color-stop(92%, #4d4d4d));
  background-image: -moz-linear-gradient(top, #666666 30%, #4d4d4d 92%);
  background-image: -webkit-linear-gradient(top, #666666 30%, #4d4d4d 92%);
  background-image: linear-gradient(to bottom, #666666 30%, #4d4d4d 92%);
  color: #e5e5e5;
  border-color: #808080;
}

.cyan_skin .mini_b2,
.pink_skin .mini_b2 {
  border: 1px solid #c9c0ab;
}

.normal_b {
  border: none;
  border-color: transparent;
  min-width: 45px;
  min-height: 30px;
  height: auto;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 100%;
  font-size: 100%;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
  letter-spacing: .05em;
}
.normal_b:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.normal_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.normal_b.gray_b, .normal_b.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.normal_b.gray_b:hover, .normal_b.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b.gray_b:active, .normal_b.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b:active:not(.gray_b) {
  -moz-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  -webkit-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
.normal_b.baseRed {
  background-color: #ff7357;
  border-bottom-color: #e06a52;
}
.normal_b.right_icon {
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -415px;
  background-repeat: no-repeat;
  padding-right: 20px;
}

.normal_b.charge_iconb {
  /*-チャージボタン-*/
  width: 64px;
  height: 32px;
  padding: 0 4px;
  text-align: left;
  background-repeat: no-repeat;
  background-position: 16px -10px;
  -moz-background-size: 64px 64px;
  -o-background-size: 64px 64px;
  -webkit-background-size: 64px 64px;
  background-size: 64px 64px;
  border-top: 1px solid #a9dd31;
  position: relative;
}
.normal_b.charge_iconb img {
  width: 22px;
  margin-left: 4px;
  margin-top: 2px;
}
.normal_b.charge_iconb.gray_b {
  background-color: #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
}
.normal_b.charge_iconb.gray_b img {
  opacity: 0.8;
}
.normal_b.charge_iconb.gray_b:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #999;
  opacity: 0.2;
  width: 64px;
  height: 32px;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: 5px;
}

.normal_b_long {
  border: none;
  border-color: transparent;
  min-width: 45px;
  min-height: 30px;
  height: auto;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 100%;
  font-size: 100%;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
  letter-spacing: .05em;
  width: 110px;
  vertical-align: middle;
}
.normal_b_long:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.normal_b_long:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.normal_b_long.gray_b, .normal_b_long.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.normal_b_long.gray_b:hover, .normal_b_long.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b_long.gray_b:active, .normal_b_long.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b_long:active:not(.gray_b) {
  -moz-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  -webkit-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
.normal_b_long.baseRed {
  background-color: #ff7357;
  border-bottom-color: #e06a52;
}

.flat_b, .flat_b_div button {
  border: none;
  border-color: transparent;
  min-width: 45px;
  min-height: 26px;
  height: auto;
  border: none;
  border-radius: 5px;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 100%;
  font-size: 100%;
  background-color: #a9dd31;
  border-bottom: 1px solid #91bf26;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
}
.flat_b:hover, .flat_b_div button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.flat_b:active, .flat_b_div button:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.flat_b.gray_b, .flat_b_div button.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.flat_b.gray_b:hover, .flat_b_div button.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.flat_b.gray_b:active, .flat_b_div button.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.flat_b:active, .flat_b_div button:active {
  margin-top: 6px;
  margin-bottom: 2px;
}

.flatR_b {
  border: none;
  border-color: transparent;
  min-width: 45px;
  min-height: 22px;
  padding: 3px;
  height: auto;
  border: none;
  border-radius: 10px / 50%;
  vertical-align: middle;
  color: #fff;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
  text-align: center;
  line-height: 100%;
  font-size: 90%;
  background-color: #9dd223;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
}
.flatR_b:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.flatR_b:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.flatR_b.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.flatR_b.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.flatR_b.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.flatR_b:active {
  margin-top: 6px;
  margin-bottom: 2px;
}

.normal_b_div button {
  border: none;
  border-color: transparent;
  min-width: 45px;
  min-height: 30px;
  height: auto;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  text-align: center;
  line-height: 100%;
  font-size: 100%;
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 4px;
  letter-spacing: .05em;
}
.normal_b_div button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.normal_b_div button:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.normal_b_div button.gray_b, .normal_b_div button.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.normal_b_div button.gray_b:hover, .normal_b_div button.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b_div button.gray_b:active, .normal_b_div button.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.normal_b_div button:active:not(.gray_b) {
  -moz-transform: translateY(0.2em);
  -ms-transform: translateY(0.2em);
  -webkit-transform: translateY(0.2em);
  transform: translateY(0.2em);
}
.normal_b_div button.baseRed {
  background-color: #ff7357;
  border-bottom-color: #e06a52;
}

.normal_b_div.b_size_m button {
  padding: 10px 20px;
  min-width: 100px;
}

/*-バナー-*/
.banner_img:empty {
  /*-中の画像がないとき-*/
  display: inline-block;
  max-width: 640px;
  width: 100%;
  height: 0;
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding-top: 10%;
  margin: 0 auto;
  vertical-align: top;
}
.banner_img:empty + .banner_button .banner_txt {
  background-color: transparent;
  color: #8db61e;
  text-shadow: none;
}

.banner_txt {
  font-size: 120%;
  line-height: 1.2em;
  border-radius: 5px;
  margin: 5px;
  padding: 2px 5px;
  top: -30%;
  right: 1%;
  text-align: left;
  min-height: 30px;
  width: 96%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-shadow: 1px 1px 1px #b3b300, -1px 1px 1px #b3b300, 1px -1px 1px #b3b300, -1px -1px 1px #b3b300;
}

.banner_area {
  width: 100%;
  text-align: center;
  position: relative;
  margin: 10px auto;
  max-width: 640px;
}

.banner_img img {
  width: 100%;
  height: auto;
  max-width: 640px;
  vertical-align: top;
}

/*-画像ボタン-*/
.banner_button {
  /*-バナー内ボタン-*/
  display: table;
  max-width: 640px;
  width: calc(100% - 6px);
  margin-left: 3px;
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 2%;
}
.banner_button > div {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.banner_button > div:nth-of-type(1) + .right_space {
  /*-右スペース分-*/
  width: 75%;
}
.banner_button > div:nth-of-type(2) + .right_space {
  /*-右スペース分-*/
  width: 60%;
}
.banner_button > div:nth-of-type(3) + .right_space {
  /*-右スペース分-*/
  width: 50%;
}
.banner_button > div:nth-of-type(4) + .right_space {
  /*-右スペース分-*/
  width: 32%;
}
.banner_button > div:nth-of-type(5) + .right_space {
  /*-右スペース分-*/
  width: 30%;
}
.banner_button > div.drag_area {
  /*-つまんで動かす用-*/
  border-radius: 6px 0 0 6px;
  transform: translateX(0);
  left: -6px;
  top: 0;
  width: 21px;
  opacity: 1;
}
.banner_button > div.drag_area::before {
  left: 1px;
  top: 14px;
  opacity: 1;
}
.banner_button button {
  width: calc(100% - 6px);
  height: calc(100% - 2px);
  position: relative;
  z-index: 5;
  overflow: hidden;
  border-radius: 5px;
  height: 40px;
  border: 0px solid;
  border-color: transparent;
  border-top: 1px solid #f8edd1;
  border-bottom: 1px solid #cf9e1f;
  background-image: url(../img/work_0.png);
  background-repeat: no-repeat;
  -moz-background-size: 100% 400%;
  -o-background-size: 100% 400%;
  -webkit-background-size: 100% 400%;
  background-size: 100% 400%;
  background-position: 0 0;
  text-align: center;
}
.banner_button button img {
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 50px;
  top: 0;
}
.banner_button button:not(.no_response) img {
  top: -3px;
}
.banner_button button:not(.no_response):hover {
  background-position: 0 33.333%;
  border-top: 1px solid #ffc1b0;
  border-bottom: 1px solid #ff5e31;
}
.banner_button button:not(.no_response):hover img {
  opacity: 0.8;
}
.banner_button button:not(.no_response):active {
  background-position: 0 66.666%;
  border-bottom: 1px solid #e2b53f;
}
.banner_button button:not(.no_response):active img {
  opacity: 0.5;
}
.banner_button button:not(.no_response).gray_b {
  background-position: 0 100%;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #8c8c8c;
}
.banner_button button:not(.no_response).gray_b img {
  bottom: -2px;
  top: auto;
  opacity: 1;
}

.no_response {
  cursor: auto;
}

/*-タブリスト チェックボックス-*/
input[type="checkbox"].tab_open_check {
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master {
  margin-bottom: 16px;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_open_label {
  bottom: 0;
  border-radius: 6px 6px 0 0;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_open_label:before {
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -580px;
  background-repeat: no-repeat;
  margin-top: 3px;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_all {
  padding-left: inherit;
  width: calc(50% - 32px);
  display: inline-block;
  vertical-align: bottom;
  margin: 10px 0 0;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_all:before {
  display: none;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_all.other_group {
  margin: 0 0 0 10px;
  padding: 0 0 1px;
  min-height: inherit;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_all.other_group:after {
  top: -8px;
  right: -8px;
  left: -8px;
  border-radius: 8px 8px 0 0;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_ul {
  background: none;
  margin: 0;
  padding: 0;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_ul li:not(.all_button) {
  display: none;
}
input[type="checkbox"].tab_open_check:checked + .tab_list_master .tab_list_ul li.all_button {
  position: relative;
  width: inherit;
  display: block;
  max-width: inherit;
  margin: 0;
  top: 0;
  left: 0;
  height: 30px;
}

.tab_list_master {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e5da;
}

.tab_open_label {
  /*-simpleモード用ラベル-*/
  position: absolute;
  background-color: #c7bfab;
  display: inline-block;
  right: 0px;
  bottom: -24px;
  border-radius: 0 0 6px 6px;
  width: 32px;
  height: 24px;
}
.tab_open_label:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 6px;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -620px;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.tab_open_label:hover {
  opacity: 0.65;
}

/*-タブリスト-*/
.tab_list_all {
  margin-top: 5px;
  margin-left: 0;
  margin-right: 5px;
  position: relative;
  padding-left: 60px;
  padding-bottom: 1px;
}
.tab_list_all:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: calc(100% - 25px);
  background-color: #d4ed8f;
  bottom: 0;
  left: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNkNGVkOGYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWY0YmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #d4ed8f), color-stop(100%, #e5f4bb));
  background-image: -moz-linear-gradient(top, #d4ed8f 50%, #e5f4bb);
  background-image: -webkit-linear-gradient(top, #d4ed8f 50%, #e5f4bb);
  background-image: linear-gradient(to bottom, #d4ed8f 50%, #e5f4bb);
}
.tab_list_all .tab_list_ul {
  position: static;
  padding-left: 5px;
  padding-right: 2px;
}

.tab_list_all,
.tab_list_all.other_group {
  max-width: 1000px;
}
@media screen and (min-width: 1580px) {
  .tab_list_all,
  .tab_list_all.other_group {
    margin-right: auto;
    margin-left: auto;
  }
}

.other_group {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 15px;
  padding: 5px;
  padding-left: 65px;
  min-height: 65px;
}
.other_group:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 8px;
  background-color: #f1efe9;
  top: 0px;
  right: 0;
  bottom: 0px;
  left: 0;
  z-index: -1;
}
.other_group:before {
  left: 5px;
  bottom: 10px;
  height: calc(100% - 48px);
  width: 56px;
  background: transparent;
  border-left: 2px solid #d9d3c4;
}
.other_group .tab_list_ul {
  background: repeating-linear-gradient(transparent, transparent 27px, #c5bba5 28px, transparent 28px, transparent 32px);
}
.other_group .tab_list_ul li {
  background: #fff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZmFmOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #fbfaf9));
  background-image: -moz-linear-gradient(top, #ffffff, #fbfaf9);
  background-image: -webkit-linear-gradient(top, #ffffff, #fbfaf9);
  background-image: linear-gradient(to bottom, #ffffff, #fbfaf9);
  border: 1px solid #d9d3c4;
  border-top-width: 2px;
  border-bottom: none;
  height: 24px;
}
.other_group .tab_list_ul li:before {
  display: none;
}
.other_group .tab_list_ul li a {
  color: #9d8d67;
}
.other_group .tab_list_ul li.all_button {
  background: #fff;
  top: 8px;
  left: 5px;
  border-color: #d9d3c4;
}
.other_group .tab_list_ul li.all_button:hover {
  border-color: #edeae3;
}
.other_group .tab_list_ul li.select {
  margin-bottom: 4px;
  margin-top: 4px;
  top: 0;
  border: 1px solid #ead429;
  border-bottom: none;
  background: #fffd95;
}
.other_group .tab_list_ul li.select.all_button {
  border: 2px solid #ead429;
  border-bottom: none;
  top: 6px;
  left: 5px;
}
.other_group .tab_list_ul li.select a {
  color: #b99f16;
}

.tab_list_group {
  position: relative;
  margin-top: 10px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 10px;
}
.tab_list_group:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 8px;
  background-color: #f1efe9;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
}
.tab_list_group .tab_list_ul {
  background: repeating-linear-gradient(transparent, transparent 27px, #ddd7ca, #ddd7ca 28px, transparent, transparent 27px, transparent, transparent 32px);
  position: relative;
}
.tab_list_group .tab_list_ul li {
  background: #fff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZmFmOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #fbfaf9));
  background-image: -moz-linear-gradient(top, #ffffff, #fbfaf9);
  background-image: -webkit-linear-gradient(top, #ffffff, #fbfaf9);
  background-image: linear-gradient(to bottom, #ffffff, #fbfaf9);
  border: 1px solid #d3ccbb;
  border-bottom: none;
  height: 24px;
}
.tab_list_group .tab_list_ul li:before {
  display: none;
}
.tab_list_group .tab_list_ul li a {
  color: #9d8d67;
}
.tab_list_group .tab_list_ul li.select {
  margin-bottom: 4px;
  margin-top: 4px;
  top: 0;
  border: 1px solid #d5cebe;
  background: #d7d0c1;
}
.tab_list_group .tab_list_ul li.select a {
  color: #857756;
}

.tab_list_ul {
  background: repeating-linear-gradient(transparent, transparent 25px, #e5e5e5, #e5e5e5 26px, transparent, transparent 27px, transparent, transparent 34px);
  margin: 5px auto;
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.4em;
  line-height: 0;
}
.tab_list_ul li {
  display: inline-block;
  max-width: 250px;
  padding: 0 5px 0;
  margin: 4px 0.5% 4px;
  height: 26px;
  background-color: #a8d923;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E4ZDkyMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a8d923), color-stop(100%, #ffffff));
  background-image: -moz-linear-gradient(top, #a8d923, #ffffff);
  background-image: -webkit-linear-gradient(top, #a8d923, #ffffff);
  background-image: linear-gradient(to bottom, #a8d923, #ffffff);
  border-radius: 15px 15px 0 0;
  position: relative;
  z-index: 1;
  font-size: 95%;
  cursor: pointer;
  letter-spacing: normal;
  line-height: 1.1em;
}
.tab_list_ul li:before {
  content: "";
  display: block;
  position: absolute;
}
.tab_list_ul li:before {
  /*-枠-*/
  top: 2px;
  right: 2px;
  bottom: 0;
  left: 2px;
  border-radius: 15px 15px 0 0;
  background-color: #f6fbe6;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjFweCIgc3RvcC1jb2xvcj0iI2Y5ZmNlZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZmRmNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1px, #ffffff), color-stop(1px, #f9fcef), color-stop(100%, #fbfdf4));
  background-image: -moz-linear-gradient(top, #ffffff 1px, #f9fcef 1px, #fbfdf4 100%);
  background-image: -webkit-linear-gradient(top, #ffffff 1px, #f9fcef 1px, #fbfdf4 100%);
  background-image: linear-gradient(to bottom, #ffffff 1px, #f9fcef 1px, #fbfdf4 100%);
  z-index: -1;
}
.tab_list_ul li.all_button {
  background: transparent;
  position: absolute;
  border-radius: 15px 15px 0 0;
  padding: 0;
  top: -4px;
  left: 0;
  width: 60px;
  height: 30px;
  border: 2px solid #d4ed8f;
  border-bottom: none;
  margin: 0;
}
.tab_list_ul li.all_button:before {
  display: none;
}
.tab_list_ul li.all_button:hover, .tab_list_ul li.all_button:active {
  opacity: 1;
}
.tab_list_ul li.all_button:hover {
  border-top-color: #dff2ab;
  border-right-color: #eaf6c7;
}
.tab_list_ul li.all_button:hover a {
  opacity: 0.4;
}
.tab_list_ul li.all_button:active {
  border-left-color: #e5f4bc;
  border-top-color: #eef8d2;
  border-right-color: #f6fbe9;
}
.tab_list_ul li.all_button:active a {
  opacity: 0.2;
}
.tab_list_ul li span {
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
  width: calc(100% - 10px);
}
.tab_list_ul li a {
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2px;
  vertical-align: middle;
  text-align: center;
  color: #668c00;
}
.tab_list_ul li:hover {
  opacity: 0.5;
}
.tab_list_ul li:active {
  opacity: 0.2;
}
.tab_list_ul li.select {
  background: #e0f89d;
  cursor: auto;
  border-radius: 15px 15px 0 0;
  opacity: 1;
  height: 24px;
  overflow: hidden;
  position: relative;
  top: -2px;
  margin-bottom: 6px;
  border: 2px solid #c3e663;
  border-bottom: none;
}
.tab_list_ul li.select:before {
  background: transparent;
  border-bottom: none;
}
.tab_list_ul li.select span {
  text-shadow: none;
}
.tab_list_ul li.select.all_button {
  position: absolute;
  top: -2px;
  height: 28px;
  border-color: #acdc2a;
}
.tab_list_ul li.select.all_button a {
  opacity: 1;
}

/*-タブリスト構造-*/
.tab_list_ul li {
  width: 13.68571%;
  margin-left: 0.3%;
  margin-right: 0.3%;
}

/* タブが1つの場合 */
.tab_list_ul li:first-child:nth-last-child(1) {
  width: 99%;
}

@media screen and (max-width: 1340px) {
  /*-画面サイズが1340px以下-*/
  .tab_list_ul li {
    width: 16.06667%;
  }
}
@media screen and (min-width: 1099px) and (max-width: 1200px), screen and (min-width: 739px) and (max-width: 900px) {
  /*-画面サイズが1100～1200px、740～900px-*/
  .tab_list_ul li {
    width: 19%;
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
}
@media screen and (min-width: 899px) and (max-width: 1100px), screen and (min-width: 449px) and (max-width: 740px) {
  /*-画面サイズが900～1100px、450～740px-*/
  .tab_list_ul li {
    width: 24%;
  }
}
@media screen and (max-width: 450px) {
  /*-画面サイズが540px以下-*/
  .tab_list_ul li {
    width: 32.33333%;
  }
}
@media screen and (max-width: 240px) {
  /*-画面サイズが240px以下-*/
  .tab_list_ul li {
    width: 49%;
  }
}
.base_gray,
.base_beige {
  padding: 5px;
  margin: 5px;
  border-radius: 8px;
}

.base_gray {
  background-color: #eee;
}

.base_beige {
  /*-ベージュ-*/
  background-color: #ededdf;
}

.sub_area_inner .base_gray,
.sub_area_inner .base_beige {
  margin: 0px;
}
.sub_area_inner .base_gray + .base_beige,
.sub_area_inner .base_gray + .quest_base_inner {
  margin-top: -5px;
  margin-bottom: -5px;
  border-radius: 0;
}
.sub_area_inner .base_gray + .base_beige + .base_gray,
.sub_area_inner .base_gray + .quest_base_inner + .base_gray {
  border-radius: 0 0 8px 8px;
}

/*-初期値として-*/
select, textarea, input {
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  border: solid 1px #a9a9a9;
  border: solid 1px #bfbfbf;
  padding: 5px;
  border-radius: 6px;
}

select {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/select_down.png);
  background-position: right center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  padding-right: 20px;
  max-width: 280px;
}

.flame_stretch select {
  margin: 0 10px;
}

@-moz-document url-prefix() {
  /* Firefoxのみ */
  select {
    text-indent: -0.2em;
    /* Firefox用 */
    text-overflow: "";
    /* Firefox用 */
    padding-right: 1.1em;
    padding-left: 1em;
  }
}
textarea {
  width: 100%;
  height: 6em;
  color: #666;
}

.form_area {
  padding: 5px;
  border: 1px solid #d9d9d9;
  background-color: #fafafa;
  border-radius: 6px;
}

.date_time_set input {
  margin-left: 5px;
  width: 2.5em;
  border-radius: 4px;
}
.date_time_set input:first-child {
  width: 4em;
}
.date_time_set select {
  margin: 10px 0;
}

.base_gray > .base_headline {
  color: #83b012;
}

.base_headline {
  /*-見出し基本-*/
  color: #97c320;
  font-size: 180%;
  margin-top: 15px;
  margin-bottom: 5px;
  overflow: hidden;
  *zoom: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-left: 5px;
}
.base_headline .normal_b {
  float: right;
  font-size: 55.55556%;
}
.base_headline:first-of-type {
  margin: 5px auto;
}

.sub_headline {
  color: #9ecc21;
  font-size: 130%;
}

.sub_h2 {
  font-size: 100%;
}

/*-タブリスト構造-*/
.kintou {
  position: relative;
  width: 100%;
  letter-spacing: -0.4em;
  /*-inline-blockの隙間をなくす-*/
}
.kintou button {
  /*-inline-blockの隙間をなくしたので元に戻す-*/
  letter-spacing: normal;
  /*-基本は5列-*/
  width: 19.2%;
  margin-left: 0.4%;
  margin-right: 0.4%;
  max-width: 256px;
  min-width: 1em;
}

/* タブが2つの場合 */
.kintou button:first-child:nth-last-child(2),
.kintou button:first-child:nth-last-child(2) ~ button {
  width: 49.2%;
}

/* タブが3つの場合 */
.kintou button:first-child:nth-last-child(3),
.kintou button:first-child:nth-last-child(3) ~ button {
  width: 32.53333%;
}

/* タブが4つの場合 */
.kintou button:first-child:nth-last-child(4),
.kintou button:first-child:nth-last-child(4) ~ button {
  width: 24.2%;
}

.comment_div {
  display: table;
  margin-top: 10px;
  margin-bottom: 10px;
}
.comment_div > div {
  display: table-cell;
  width: 100%;
  position: relative;
  vertical-align: top;
}
.comment_div > div button {
  margin: 0 0 0 10px;
}

.date_time_set {
  text-align: right;
  margin: 10px 5px;
}
.date_time_set input[type="text"] {
  margin-right: 3px;
}
.date_time_set input[type="text"]:first-child {
  margin-left: -0.4em;
}

/*-ページャー-*/
.pagination_flame {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.pagination_flame .flame_stretch,
.pagination_flame .flame_r,
.pagination_flame .flame_l {
  vertical-align: middle;
}
.pagination_flame .page_count {
  margin: 5px;
  margin-left: 0.5em;
}
.pagination_flame ul {
  height: 26px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  width: 100%;
  /*-左右のpage送りボタンに中心をあわせるために-*/
  margin-bottom: 9px;
  overflow: hidden;
  *zoom: 1;
}
.pagination_flame ul:before {
  content: "";
  display: block;
  background-color: #e0f3b4;
  height: 3px;
  position: absolute;
  border-radius: 10px;
  top: 13px;
  z-index: -1;
  left: 5px;
  right: 5px;
}
.pagination_flame ul li {
  width: 10%;
  float: left;
  display: inline-block;
  padding: 0px;
  z-index: 0;
  text-align: center;
}
.pagination_flame ul li.select span {
  background-color: #a9dd31;
  color: #fff;
  border-radius: 50%;
}
.pagination_flame ul li > a, .pagination_flame ul li > span {
  /*-リンクありなし共通-*/
  display: block;
  width: 26px;
  height: 26px;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  color: #80b012;
  line-height: 26px;
}
.pagination_flame ul li > a {
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
.pagination_flame ul li > a span {
  letter-spacing: -0.1em;
  margin-left: -0.05em;
}
.pagination_flame ul li > a:hover {
  background-color: #eaf9c7;
  color: #618906;
  border-color: transparent;
}
.pagination_flame ul li > span {
  color: #d9d9d9;
}

@media screen and (max-width: 1200px) {
  /*-画面サイズが1200px以下-*/
  .pagination_flame ul li {
    width: 12.5%;
  }
}
@media screen and (max-width: 800px) {
  /*-画面サイズが800px以下-*/
  .pagination_flame ul li {
    width: 16.66667%;
  }
}
.page_count {
  background-color: #a9dd31;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGQzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzlkZDIyMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9dd31), color-stop(100%, #9dd223));
  background-image: -moz-linear-gradient(top, #a9dd31, #9dd223);
  background-image: -webkit-linear-gradient(top, #a9dd31, #9dd223);
  background-image: linear-gradient(to bottom, #a9dd31, #9dd223);
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px / 50%;
  display: inline-block;
  margin-left: 0.5em;
  font-size: 80%;
  vertical-align: text-bottom;
}

.page_next,
.page_previous {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
.page_next:before,
.page_previous:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}
.page_next span,
.page_previous span {
  /*-文字消す-*/
  display: none;
}
.page_next:hover,
.page_previous:hover {
  background-color: #a9dd31;
  color: #fff;
  border-color: transparent;
}
.page_next.gray_b,
.page_previous.gray_b {
  background-color: #bfbfbf;
  color: #fff;
  border-color: transparent;
  opacity: 0.3;
}

.page_next:before {
  margin-left: 5px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #a9dd31;
}
.page_next:hover:before {
  border-color: transparent transparent transparent #fff;
}
.page_next.gray_b:before, .page_next.gray_b::before {
  border-color: transparent transparent transparent #f2f2f2;
}

.page_previous:before {
  margin-left: 2px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #a9dd31 transparent transparent;
}
.page_previous:hover:before {
  border-color: transparent #fff transparent transparent;
}
.page_previous.gray_b:before, .page_previous.gray_b::before {
  border-color: transparent #f2f2f2 transparent transparent;
}

/*-アイテム実験-*/
.item_flame {
  position: relative;
  margin: 0;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 8px;
}

.item_info {
  background-color: #fff;
  border-radius: 0 8px 8px 8px;
  padding: 5px 5px 0;
}
.item_info .title {
  overflow: hidden;
  *zoom: 1;
}

.title {
  background-color: #e0f3b4;
  background-color: #e8f7c4;
  color: #679400;
  padding: 2px 6px;
  position: relative;
  border-radius: 6px;
  line-height: 1.2;
}

.item_pic {
  background-color: #fff;
  border-radius: 10px 0 0 10px;
  margin-right: -1px;
  position: relative;
  z-index: 10;
}
.item_pic img {
  width: 50px;
  height: 50px;
  vertical-align: top;
}

.item_pic_inner {
  border: 1px solid #e5e5e5;
  background-color: #fff;
  display: inline-block;
  padding: 0;
  margin: 5px;
  border-radius: 5px;
  position: relative;
  z-index: 0;
}
.item_pic_inner.bgc_red {
  border: 1px solid #ffccc0;
}

.level_icon {
  display: inline-block;
}
.level_icon dl {
  background-color: #edeae3;
  border-radius: 10px;
  margin: 3px 5px;
  padding: 2px 5px 2px 0;
  position: relative;
  display: table;
  border-collapse: separate;
  border-spacing: 1px 0;
}
.level_icon dt, .level_icon dd {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.level_icon dt {
  width: 6em;
  text-align: center;
  font-size: 90%;
  white-space: nowrap;
}
.level_icon dt:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #d9d3c4;
  right: 2px;
  width: 1px;
  top: 1px;
  bottom: 1px;
}
.level_icon dd {
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 100px;
}
.level_icon dd:not([class]) {
  /*-classが無い時-*/
  border: 2px solid #edeae3;
}
.level_icon dd:before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}

.i2001:before {
  background-image: url(../img/common/i2001.png);
}

.i2002:before {
  background-image: url(../img/common/i2002.png);
}

.i2003:before {
  background-image: url(../img/common/i2003.png);
}

.i2004:before {
  background-image: url(../img/common/i2004.png);
}

.i2005:before {
  background-image: url(../img/common/i2005.png);
}

.i2006:before {
  background-image: url(../img/common/i2006.png);
}

.i2007:before {
  background-image: url(../img/common/i2007.png);
}

.i2008:before {
  background-image: url(../img/common/i2008.png);
}

.i2009:before {
  background-image: url(../img/common/i2009.png);
}

.i2010:before {
  background-image: url(../img/common/i2010.png);
}

.i2011:before {
  background-image: url(../img/common/i2011.png);
}

.i2012:before {
  background-image: url(../img/common/i2012.png);
}

.i2013:before {
  background-image: url(../img/common/i2013.png);
}

.i2014:before {
  background-image: url(../img/common/i2014.png);
}

.i2015:before {
  background-image: url(../img/common/i2015.png);
}

.i2016:before {
  background-image: url(../img/common/i2016.png);
}

.i2017:before {
  background-image: url(../img/common/i2017.png);
}

.i2018:before {
  background-image: url(../img/common/i2018.png);
}

.i2019:before {
  background-image: url(../img/common/i2019.png);
}

.i2020:before {
  background-image: url(../img/common/i2020.png);
}

.i2021:before {
  background-image: url(../img/common/i2021.png);
}

.i2022:before {
  background-image: url(../img/common/i2022.png);
}

.i2023:before {
  background-image: url(../img/common/i2023.png);
}

.i2024:before {
  background-image: url(../img/common/i2024.png);
}

.i2025:before {
  background-image: url(../img/common/i2025.png);
}

.i2026:before {
  background-image: url(../img/common/i2026.png);
}

.i2027:before {
  background-image: url(../img/common/i2027.png);
}

.i2028:before {
  background-image: url(../img/common/i2028.png);
}

.i2029:before {
  background-image: url(../img/common/i2029.png);
}

.i2100:before {
  background-image: url(../img/common/i2100.png);
}

.midasi_item {
  background-color: #f00;
}

.item_data {
  /*-アイテム登録日-*/
  line-height: 1em;
  font-size: 70%;
  margin-left: 5px;
  opacity: 0.9;
}

.item_code {
  /*-詳細表示時に出る-*/
  background-color: #aedf64;
  color: #6e9c27;
  display: block;
  position: relative;
  width: 128px;
  border-radius: 6px;
  padding: 0 4px;
  margin-top: 3px;
  margin-bottom: 1px;
  font-size: 85%;
  text-align: center;
}

.item_author {
  font-size: 85%;
  padding: 3px 10px;
  color: #79ac2b;
  position: relative;
  min-width: 128px;
  display: inline-block;
}
.item_author:before, .item_author:after {
  content: "";
  display: block;
  width: 4px;
  border: 2px solid #aad449;
  position: absolute;
  top: 3px;
  bottom: 3px;
}
.item_author:before {
  left: 0;
  border-right: none;
}
.item_author:after {
  right: 0;
  border-left: none;
}

.title .title_sub_item {
  margin-bottom: 0;
}

.title_sub_item {
  margin: 2px 0;
  display: block;
  width: 100%;
  clear: both;
}

.item_label {
  float: right;
  border: 1px solid #ccc;
  padding: 1px 5px;
  text-align: center;
  font-size: 75%;
  background-color: #fff;
  border-radius: 6px;
  color: #808080;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
}
.item_label:before {
  content: "詳細表示";
  display: inline;
}
.item_label:after {
  content: "＋";
  display: inline;
  color: #84b908;
  margin-left: 5px;
  font-weight: bold;
}
.item_label:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.item_label:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.item_label.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.item_label.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.item_label.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.item_top {
  display: block;
  position: relative;
  margin-right: 180px;
}
.item_top > span {
  margin: 0 5px 0 0;
  padding: 0 5px;
  display: inline-block;
  color: #6d9b03;
  font-size: 80%;
  background-color: #effad6;
  border-radius: 10px;
}
.item_top > span.i_coin, .item_top > span.i_ticket {
  background-color: #fff;
}

.i_coin:after,
.i_ticket:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
  margin-left: 2px;
}

.i_coin:after {
  background-image: url(../img/i_coin.png);
}

.i_ticket:after {
  background-image: url(../img/i_ticket.png);
}

.favorite_wrapper {
  width: 180px;
  position: absolute;
  left: 100%;
  top: 0;
  text-align: right;
}
.favorite_wrapper > span {
  font-size: 70%;
  display: inline-block;
  margin-right: 5px;
}

.favorite_star,
.favorite_star span {
  background-image: url(../img/icon_star2.png);
  -moz-background-size: 20px 200%;
  -o-background-size: 20px 200%;
  -webkit-background-size: 20px 200%;
  background-size: 20px 200%;
  background-repeat: repeat-x;
}

.favorite_star {
  width: 100px;
  background-position: bottom;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.favorite_star .favorite_over {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.favorite_star span {
  height: 20px;
  display: block;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  background-position: top left;
}

/*-アイテム状態*/
.item_status {
  border-radius: 10px;
  display: inline-block;
  padding: 0 6px;
  font-size: 90%;
  vertical-align: top;
  margin: 0 1px;
}
.item_status.col_red {
  background-color: #ff7357;
  color: #fff;
}
.item_status.col_cyan {
  background-color: #62d1ab;
  color: #fff;
}

/*-残り回数-*/
.counter {
  color: #83af1d;
  border: 2px solid #b2e147;
  border-radius: 10px / 50%;
  line-height: 1em;
  font-size: 50%;
  padding: 3px;
  z-index: 5;
  background-color: #feffeb;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.counter p > span {
  font-size: 180%;
}

/*-item_topの中にある場合を想定-*/
span + .counter {
  vertical-align: middle;
}

.item_valid_time {
  display: inline-block;
  text-align: center;
}

.item_valid_day {
  display: inline-block;
  text-align: center;
  margin-left: 8px;
  vertical-align: middle;
}
.item_valid_day:before {
  /*-スラッシュ棒-*/
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  top: 0;
  bottom: 0;
  margin-left: -4px;
  background-color: #bbe45d;
  z-index: -1;
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
.item_valid_day:only-child {
  margin-left: 0;
}
.item_valid_day:only-child:before {
  display: none;
}

.item_bottom {
  position: relative;
  overflow: hidden;
  *zoom: 1;
}
.item_bottom .button_area button {
  margin-top: 0;
  margin-left: 1px;
}
.item_bottom .button_area .item_status + .button_area {
  margin-left: 5px;
}
.item_bottom .button_area .item_status + button {
  margin-left: 2px;
}
.item_bottom .button_area .item_status + button.none + button {
  margin-left: 2px;
}
.item_bottom .button_area .item_status + button.none + button.none + button {
  margin-left: 2px;
}

.item_info_txt {
  display: inline-block;
  float: left;
  color: #808080;
  margin-left: 0.8em;
  margin-top: 0.2em;
  line-height: 1.2em;
}

.supplier_txt {
  display: block;
  color: #3dbdf9;
  margin-left: 0.8em;
  margin-top: 2em;
  line-height: 1.2em;
  clear: both;
}

/*-頼まれごと一覧用-*/
.quest_base {
  margin: 5px auto 20px;
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.quest_base .base_gray {
  border-radius: 6px 6px 0 0;
  background-color: #e8e5dd;
  margin: 0;
}
.quest_base .base_gray .flame_stretch {
  vertical-align: middle;
}
.quest_base .base_gray select {
  margin: 0 auto;
}

.quest_base_inner {
  background-color: #ded9ce;
  padding: 10px;
  border-radius: 8px;
}

.side_mark {
  /*-状態を表すアイコンが右に表示-*/
}
.side_mark.mark_simple {
  /*-簡易表示の時はマークを消す-*/
}
.side_mark.mark_simple button.mark {
  display: none;
}
.side_mark.mark_simple_other button.mark {
  display: block;
}
.side_mark .item_code {
  color: #ffaa33;
  background-color: #fff;
}
.side_mark .col_red {
  display: inline-block;
  vertical-align: sub;
  font-size: 80%;
}
.side_mark .item_bottom {
  width: calc(100% - 72px);
  float: left;
}
.side_mark .item_bottom textarea {
  font-size: 100%;
  color: #808080;
  width: calc(100% - 25px);
  margin-left: 4px;
  margin-top: 8px;
}
.side_mark .item_bottom textarea[readonly] {
  margin-top: 0;
  height: 1.5em;
  overflow: hidden;
  padding: 0;
  margin-left: 0.7em;
  width: calc(100% - 10px);
  border: none;
  resize: none;
  position: relative;
  overflow: hidden;
}
.side_mark .item_bottom textarea[readonly]:focus {
  outline: 0;
}
.side_mark .sub_item {
  border: none;
  width: calc(100% - 75px);
  float: left;
  margin-left: 16px;
}
.side_mark .sub_item > div {
  letter-spacing: normal;
}
.side_mark .sub_item .flat_b_div button:first-of-type {
  float: right;
}
.side_mark .mark {
  position: absolute;
  right: 8px;
  width: 43px;
  height: 41px;
}
.side_mark img.mark + button.mark {
  right: 54px;
}
.side_mark button.mark {
  background-image: url(../img/qp_magic.gif);
  background-color: transparent;
  border: none;
  width: 40px;
  height: 40px;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.side_mark .item_info:after {
  /*-マークが入るスペース確保用-*/
  content: "";
  display: inline-block;
  width: 50px;
  height: 41px;
  float: right;
}

input[type="checkbox"].item_check:checked + .side_mark.mark_simple {
  /*-簡易表示の時はマークを消す-*/
}
input[type="checkbox"].item_check:checked + .side_mark.mark_simple button.mark {
  display: inherit;
}
input[type="checkbox"].item_check:checked + .side_mark.mark_simple_other button.mark {
  display: none;
}
input[type="checkbox"].item_check:checked + .side_mark.mark_simple_other .item_info:after {
  height: 41px;
}
input[type="checkbox"].item_check:checked + .side_mark .item_info:after {
  height: 72px;
}
input[type="checkbox"].item_check:checked + .side_mark .item_bottom {
  width: calc(100% - 56px);
}
input[type="checkbox"].item_check:checked + .side_mark .item_bottom textarea {
  width: calc(100% - 24px);
  margin-left: 16px;
}
input[type="checkbox"].item_check:checked + .side_mark .mark {
  margin-top: 5px;
}
input[type="checkbox"].item_check:checked + .side_mark img.mark + button.mark {
  right: 8px;
  margin-top: 48px;
}
input[type="checkbox"].item_check:checked + .side_mark button.mark {
  width: 46px;
  height: 46px;
}

.button_area {
  display: inline-block;
  text-align: right;
  float: right;
}
.button_area .counter {
  vertical-align: top;
  margin-bottom: 4px;
}
.button_area .counter + .item_status {
  vertical-align: text-top;
  margin-bottom: 3px;
}
.button_area button {
  margin-left: 5px;
  width: 60px;
}

.sub_item,
.title_sub_item,
button.config {
  display: none;
}

input[type="checkbox"].item_check {
  display: none;
}

input[type="checkbox"].item_check:checked + .item_flame {
  background-color: transparent;
}
input[type="checkbox"].item_check:checked + .item_flame > div > .item_pic img {
  width: 80px;
  height: 80px;
}
input[type="checkbox"].item_check:checked + .item_flame .item_label:before {
  content: "簡易表示";
}
input[type="checkbox"].item_check:checked + .item_flame .item_label:after {
  content: "－";
}
input[type="checkbox"].item_check:checked + .item_flame .title {
  padding-top: 4px;
  padding-bottom: 4px;
}
input[type="checkbox"].item_check:checked + .item_flame .sub_item,
input[type="checkbox"].item_check:checked + .item_flame .title_sub_item {
  display: block;
}
input[type="checkbox"].item_check:checked + .item_flame button.config {
  display: inline-block;
}

/*-詳細表示-*/
.more_info {
  position: relative;
}
.more_info .item_pic img {
  width: 80px;
  height: 80px;
}

.sub_item {
  margin: 10px 0 10px 6px;
  padding: 0;
  position: relative;
  border-left: 3px solid #e7f2cf;
  letter-spacing: -.40em;
  /*-改行スペースを無くす-*/
}
.sub_item .item_pic {
  border: none;
  background-color: transparent;
  position: absolute;
}
.sub_item .item_pic img {
  width: 50px;
  height: 50px;
}
.sub_item .item_info {
  border: none;
  background-color: transparent;
}
.sub_item .favorite_wrapper {
  width: 100px;
}
.sub_item .item_top {
  /*-お気に入り分のスペース-*/
  margin-right: 100px;
}
.sub_item .title,
.sub_item .item_top {
  /*-アイテム画像用のスペースをあける-*/
  margin-left: 60px;
  min-height: 23px;
}
.sub_item .item_info_txt {
  margin-top: 0.5em;
  margin-left: 0;
}
.sub_item .supplier_txt {
  margin-left: 0;
}
.sub_item.present_item {
  /*--プレゼントメッセージ*/
  border: none;
}
.sub_item.present_item > span {
  font-size: 90%;
}
.sub_item.present_item > * {
  letter-spacing: normal;
}
.sub_item.present_item .common_flame {
  font-size: 100%;
}
.sub_item.present_item .common_flame .flame_stretch.flame_balloon:only-child {
  margin-left: 20px;
  display: block;
}
.sub_item.present_item .common_flame > div {
  border: none;
  width: auto;
}
.sub_item.pagination_flame {
  /*-ページ送り用-*/
  border: none;
  max-width: 190px;
  letter-spacing: normal;
  margin: 0 10px 0 auto;
}
.sub_item.pagination_flame > div {
  vertical-align: middle;
}
.sub_item > div > div {
  width: 98%;
  margin-left: 1%;
  position: relative;
}
.sub_item > div > div:not(:first-child) {
  border-top: 1px solid #ddecbb;
}
.sub_item > div > div:first-child {
  margin-top: 10px;
}
.sub_item > div > div .sub_item_flame {
  width: 100%;
}

.info_txt {
  color: #f48f00;
  background-color: #fff;
  border-color: #ffca7f;
  border-style: solid;
  padding: 5px;
  border-width: 1px 0 1px 0;
  text-align: center;
  clear: both;
  display: block;
}

.sub_item_flame {
  font-size: 100%;
  background-color: #fff;
  width: 48%;
  margin-left: 1%;
  padding-top: 5px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  /*-改行スペースを元に戻す-*/
}

@media screen and (min-width: 1301px) {
  /*- 1301px 以上 -*/
  .sub_item_flame:nth-child(even) {
    /*-偶数（右）-*/
    margin-left: 2%;
  }
  .sub_item_flame:nth-child(2) {
    margin-top: 10px;
    border-top: none;
  }
  .sub_item_flame:nth-child(2):before {
    /*- 右仕切り線-*/
    content: "";
    display: block;
    width: 3px;
    background-color: #e7f2cf;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1%;
  }
}
@media screen and (max-width: 1300px) {
  /*-$width_1300以下 ボタンの数-*/
  .sub_item_flame {
    width: 98%;
  }
}
/*----------------------------------------------------
 iflame用page(他のmedia screenの影響を受けないように一番下に書く)
----------------------------------------------------*/
#page.iflame {
  max-width: none;
  min-width: 600px;
  height: 100%;
  background-color: transparent;
  position: static;
  padding-bottom: inherit;
}
#page.iflame .contents .other_area {
  /*-.other_areaは消す-*/
  display: none;
}
#page.iflame .contents > .other_area {
  /*-直下の.other_areaは表示-*/
  display: block;
}
#page.iflame .contents .header_inner {
  display: none;
}

.indicator {
  /*-インジケーター-*/
  font-size: 60%;
  border-radius: 3px;
  background-color: #f00;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  padding: 2px 5px;
  margin-right: 0;
  vertical-align: 15%;
}
.indicator.live {
  background-color: #ff531d;
}
.indicator.rec {
  background-color: #31b3d0;
}
.indicator.soon {
  background-color: #fff;
  border: 1px solid #9dd223;
  color: #83af1d;
}
.indicator.next {
  background-color: #9dd223;
}

.option_menu {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

/*-音量調整-*/
.speaker_vol {
  position: relative;
  height: 26px;
  width: 26px;
  display: inline-block;
  vertical-align: text-bottom;
  /*-音量が何も選択されてない時に表示される（念のために）-*/
  background-color: #fff;
  border-radius: 5px;
}
.speaker_vol > ul {
  /*-li spanの隙間無くす-*/
  line-height: 0;
}
.speaker_vol:before {
  /*-音量が何も選択されてない時に表示される（念のために）-*/
  content: "vol";
  position: absolute;
  color: #fff;
}
.speaker_vol:hover:before {
  /*- hover範囲拡張-*/
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -7px;
  width: 40px;
  height: 170px;
}
.speaker_vol:hover ul {
  background-color: #fff;
  position: absolute;
  display: inline-block;
  border-radius: 5px;
}
.speaker_vol:hover ul:before {
  /*-意識しない連打で最大音量になるのを防ぐために最初の1マスの隙間を作る-*/
  content: "";
  display: block;
  width: 24px;
  width: 100%;
  height: 24px;
  border-radius: 5px 5px 0 0;
  border: 1px solid #84d2e3;
  border-bottom: none;
  background-color: #f5f5f5;
  box-sizing: border-box;
}
.speaker_vol:hover ul li:last-of-type span {
  border-radius: 0 0 5px 5px;
  border-bottom: 1px solid #84d2e3;
}
.speaker_vol:hover ul li span {
  display: inline-block;
  position: relative;
  border-bottom: none;
  border-color: #84d2e3;
  border-top-color: #c3e9f1;
  border-radius: 0;
}
.speaker_vol:hover ul li input[type="radio"] ~ span {
  display: block;
}
.speaker_vol:hover ul li input[type="radio"]:checked ~ span {
  background-color: #c5f4ff;
  cursor: auto;
}
.speaker_vol:hover ul li input[type="radio"]:checked ~ span:hover:before {
  visibility: hidden;
}
.speaker_vol input[type="radio"] {
  display: none;
}
.speaker_vol input[type="radio"]:not(:checked) ~ span {
  display: none;
}
.speaker_vol label span {
  position: absolute;
  width: 26px;
  height: 26px;
  background-image: url(../img/speaker_volume.png);
  background-repeat: no-repeat;
  display: inline-block;
  -moz-background-size: 26px 130px;
  -o-background-size: 26px 130px;
  -webkit-background-size: 26px 130px;
  background-size: 26px 130px;
  vertical-align: text-bottom;
  background-color: #fff;
  border: 1px solid #84d2e3;
  border-radius: 5px;
  cursor: pointer;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
}
.speaker_vol label span:hover:before {
  /*-ボーダーまで半透明になるのを回避するために上から被せる-*/
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.speaker_vol label span.vol0 {
  border-color: #ccc;
}

.vol4 {
  background-position: 0 0;
}

.vol3 {
  background-position: 0 -26px;
}

.vol2 {
  background-position: 0 -52px;
}

.vol1 {
  background-position: 0 -78px;
}

.vol0 {
  background-position: 0 -104px;
}

input[type="checkbox"][id^="speaker_b"] {
  /*- スピーカー -*/
  display: none;
}
input[type="checkbox"][id^="speaker_b"] + label {
  /*-共通-*/
  width: 26px;
  height: 26px;
  background-image: url(../img/icon_option.png);
  background-repeat: no-repeat;
  display: inline-block;
  -moz-background-size: 26px 208px;
  -o-background-size: 26px 208px;
  -webkit-background-size: 26px 208px;
  background-size: 26px 208px;
  vertical-align: text-bottom;
  background-color: #fff;
  border: 1px solid #84d2e3;
  border-radius: 5px;
  cursor: pointer;
}
input[type="checkbox"][id^="speaker_b"] + label:hover {
  opacity: 0.5;
}
input[type="checkbox"][id^="speaker_b"] + .speaker_b_label {
  background-position: 0 0;
}
input[type="checkbox"][id^="speaker_b"]:checked + .speaker_b_label {
  background-position: 0 -26px;
  border-color: #ccc;
}

.music_b,
.music_b_off,
.fast_b,
.fast_b_off {
  width: 26px;
  height: 26px;
  background-image: url(../img/icon_option.png);
  background-repeat: no-repeat;
  display: inline-block;
  -moz-background-size: 26px 208px;
  -o-background-size: 26px 208px;
  -webkit-background-size: 26px 208px;
  background-size: 26px 208px;
  vertical-align: text-bottom;
  background-color: #fff;
  border: 1px solid #84d2e3;
  border-radius: 5px;
  cursor: pointer;
}
.music_b:hover,
.music_b_off:hover,
.fast_b:hover,
.fast_b_off:hover {
  opacity: 0.5;
}

.music_b {
  background-position: 0 -52px;
}

.music_b_off {
  background-position: 0 -78px;
  border-color: #ccc;
}

.fast_b {
  background-position: 0 -104px;
}

.fast_b_off {
  background-position: 0 -130px;
  border-color: #ccc;
}

/*- fullscreen用 音量調整（fullscreen以外でも使用可能） -*/
.speaker_vol.full {
  background-color: #a9dd31;
  height: 64px;
  width: 72px;
  margin: 3px;
  border-radius: 8px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 0 1px rgba(0, 0, 0, 0.1);
}
.speaker_vol.full p {
  left: 0;
  right: 0;
  width: 100%;
  display: block;
  margin-top: 13px;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  z-index: 2;
}
.speaker_vol.full label span {
  width: 72px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #a3d52f;
  border-bottom: 2px solid #97c828;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGQzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2YzkyMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a9dd31), color-stop(100%, #96c921));
  background-image: -moz-linear-gradient(top, #a9dd31, #96c921);
  background-image: -webkit-linear-gradient(top, #a9dd31, #96c921);
  background-image: linear-gradient(to bottom, #a9dd31, #96c921);
  color: #fff;
  z-index: 1;
  background-position: inherit;
  display: block;
  text-align: center;
}
.speaker_vol.full label span:after {
  /*-アイコンスペース-*/
  content: "";
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 36px;
  height: 36px;
  background-image: url(../img/speaker_volume_full.png);
  background-repeat: no-repeat;
  -moz-background-size: 36px 180px;
  -o-background-size: 36px 180px;
  -webkit-background-size: 36px 180px;
  background-size: 36px 180px;
  top: 1px;
}
.speaker_vol.full label span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px 3px;
  border-color: #fff;
}
.speaker_vol.full label span.vol0 {
  background: #c5ceac;
}
.speaker_vol.full label span:hover:before {
  /*-枠-*/
  z-index: 1;
}
.speaker_vol.full:hover:before {
  /*- hover範囲拡張 -*/
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -6%;
  width: 112%;
  height: 258px;
}
.speaker_vol.full:hover label span {
  /*- hover時の各音量のサイズ -*/
  height: 38px;
}
.speaker_vol.full:hover ul {
  width: 100%;
  border-radius: 8px;
  background-color: transparent;
}
.speaker_vol.full:hover ul::before {
  height: 56px;
  /*-hover時の高さ-*/
  border-radius: 8px 8px 0 0;
  background-color: #a9dd31;
  border: 1px solid #a3d52f;
  border-bottom: none;
}
.speaker_vol.full:hover ul:after {
  /*-白枠-*/
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px 3px;
  border-color: #fff;
}
.speaker_vol.full:hover ul li span {
  background: #bec6ab;
  border-color: #a3d52f;
  border-top-color: #e1e4d6;
}
.speaker_vol.full:hover ul li span:before {
  border-radius: 0;
  border-width: 0 3px;
}
.speaker_vol.full:hover ul li:last-child span {
  border-bottom: none;
  border-bottom: 2px solid #bec6ab;
  border-radius: 0 0 8px 8px;
}
.speaker_vol.full:hover ul li:last-child span:before {
  border-radius: 0 0 8px 8px;
  border-width: 0 3px 2px;
}
.speaker_vol.full:hover ul li:first-child span {
  border-top-color: #91bf26;
}
.speaker_vol.full:hover ul li input[type="radio"]:checked ~ span {
  background-color: #9acd22;
  border-top-color: #91bf26;
}
.speaker_vol.full:hover ul li input[type="radio"]:checked ~ span:hover:before {
  /*-選択時のhover処理-*/
  visibility: visible;
  background-color: transparent;
}
.speaker_vol.full:hover ul li:not(:last-child) input[type="radio"]:checked ~ span {
  border-bottom: 1px solid #8dbc1f;
}
.speaker_vol.full .vol4:after {
  background-position: 0 0;
}
.speaker_vol.full .vol3:after {
  background-position: 0 -36px;
}
.speaker_vol.full .vol2:after {
  background-position: 0 -72px;
}
.speaker_vol.full .vol1:after {
  background-position: 0 -108px;
}
.speaker_vol.full .vol0:after {
  background-position: 0 -144px;
}

.iflame header {
  height: 32px;
  min-height: 32px;
}
.iflame .indicator + .header_title {
  max-width: calc(100% - 65px - 45px);
}
.iflame .indicator.rec + .header_title {
  max-width: calc(100% - 65px - 55px);
}
.iflame .header_title {
  font-weight: bold;
  font-size: 140%;
  color: #7ca61b;
  display: inline-block;
  max-width: calc(100% - 65px);
  /*-長すぎたタイトルを省略する処理-*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: -22%;
}
.iflame .header_inner {
  display: block;
  position: relative;
  z-index: 5;
  margin-left: 120px;
  top: 5px;
}
.iflame .container {
  /*-ヘッダー分引く-*/
  height: -webkit-calc(100% - 32px);
  height: calc(100% - 32px);
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}
.iflame .contents {
  display: block;
  height: 100%;
  overflow: hidden;
}
.iflame .contents:before {
  display: none;
}
.iflame .contents_inner {
  display: block;
  margin-right: 300px;
  /*-サイドバー分-*/
  vertical-align: top;
  height: 100%;
  position: relative;
  max-width: inherit;
  /*-2017.11.22追加-*/
}
.iflame #cf_mainframe {
  margin: 0;
}
.iflame .main_area {
  float: none !important;
}
.iflame .sub_wraper {
  height: 100%;
  width: 100%;
  bottom: 0;
  display: block !important;
  overflow: auto !important;
}
.iflame .sub_area_wraper {
  margin: 0 !important;
  float: none !important;
}
.iflame .sub_area {
  width: 100%;
  margin-bottom: 0;
  min-width: inherit;
  background-color: transparent;
  padding: 5px;
}
.iflame .other_area {
  display: block;
  width: 300px;
  vertical-align: top;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  /*-通常時の残り-*/
  margin-bottom: 0;
}
@media screen and (max-width: 750px) {
  .iflame {
    /*-750px以下-*/
  }
  .iflame .contents_inner {
    margin-right: 240px;
    /*-サイドバー分-*/
  }
  .iflame .other_area {
    width: 240px;
  }
}
@media screen and (max-width: 600px) {
  .iflame {
    /*-600px以下-*/
  }
  .iflame .indicator + .header_title {
    width: auto;
  }
  .iflame .indicator + .header_title:before {
    /*-インジケーター用スペース-*/
    content: "";
    display: inline-block;
    width: 56px;
    height: 10px;
  }
  .iflame .header_title {
    font-size: 120%;
    background-color: #ecfacf;
    line-height: 1.6em;
    padding: 0 2px 0;
    display: inline;
    width: auto;
    /*-初期値-*/
    overflow: auto;
    text-overflow: clip;
    white-space: normal;
  }
  .iflame .indicator {
    width: 56px;
    padding: 2px 0;
    text-align: center;
    vertical-align: top;
    position: absolute;
    left: 2px;
    top: 3px;
  }
  .iflame .option_menu {
    right: 0;
    bottom: -2px;
    top: auto;
    position: static;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    display: inline-block;
    float: right;
  }
  .iflame .contents_inner {
    margin-right: 200px;
    /*-サイドバー分-*/
  }
  .iflame .other_area {
    width: 200px;
    font-size: 90%;
    height: -webkit-calc(100% - 50px);
    height: calc(100% - 50px);
  }
}

@media screen and (max-width: 600px) {
  /*-600px以下-*/
  #page.iflame {
    height: auto;
    min-width: 570px;
    /*-吹き出し(角丸)-*/
  }
  #page.iflame .common_flame {
    margin: 0 0 5px;
  }
  #page.iflame .chara_base2.size_m {
    width: 64px;
    height: 52px;
    -moz-box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
    -webkit-box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
    box-shadow: 0px 1px 0px 1px rgba(68, 68, 68, 0.1);
  }
  #page.iflame .chara_base2.size_m img {
    height: 44px;
    margin-left: -22px;
  }
  #page.iflame .balloon_tip {
    /*-吹き出し先-*/
    top: 20px;
    left: -15px;
  }
  #page.iflame .tip_right {
    /*-右側配置-*/
  }
  #page.iflame .tip_right > .balloon_tip {
    /*-吹き出し先-*/
    left: auto;
    right: -15px;
  }
  #page.iflame .balloon_body.rounded {
    border-radius: 7px;
    padding: 7px;
    -moz-box-shadow: 0px 1px 0px 0 rgba(68, 68, 68, 0.1);
    -webkit-box-shadow: 0px 1px 0px 0 rgba(68, 68, 68, 0.1);
    box-shadow: 0px 1px 0px 0 rgba(68, 68, 68, 0.1);
  }
  #page.iflame .balloon_body.rounded p {
    /*-本文-*/
    font-size: 75%;
  }
  #page.iflame .balloon_body.rounded:before {
    border-radius: 7px;
  }
  #page.iflame .balloon_body.rounded .balloon_head {
    font-size: 70%;
  }
}
@media screen and (max-width: 550px) {
  /*-550px以下-*/
  #page.iflame {
    min-width: 250px;
  }
  #page.iflame .flame_stretch.flame_balloon {
    padding: 0 3px 0 8px;
  }
  #page.iflame .contents_inner {
    margin-right: 0;
  }
  #page.iflame .contents_inner .other_area {
    /*-直下の.other_areaを表示-*/
    position: static;
    display: block;
    width: 40% !important;
    float: right;
    overflow: auto;
    /*-ちらちらスクロールバーが出たり消えたりするので余裕-*/
    margin-top: -1px;
  }
  #page.iflame .sub_wraper {
    width: 60% !important;
    float: left;
  }
  #page.iflame .contents > .other_area {
    /*-直下の.other_areaは消す-*/
    display: none;
  }
  #page.iflame .contents .header_title {
    font-size: 110%;
  }
  #page.iflame .contents .header_inner {
    /*-移動先ヘッダー-*/
    display: block;
    position: absolute;
    top: auto;
    width: 40%;
    position: relative;
    float: right;
  }
}
@media screen and (max-width: 320px) {
  /*-320px以下(注260pxで最適化する)-*/
  #page.iflame .common_flame {
    /*-table解除-*/
    display: block;
    position: relative;
    padding-bottom: 34px;
    /*-顔アイコンスペース-*/
  }
  #page.iflame .common_flame > div {
    display: block;
  }
  #page.iflame .common_flame > div.flame_l {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #page.iflame .common_flame > div.flame_r {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #page.iflame .flame_stretch.flame_balloon {
    padding: 0 3px 0 3px;
    margin-top: 2px;
  }
  #page.iflame .flame_stretch.flame_balloon .balloon_tip {
    left: 15px;
    top: 100%;
    margin-top: -38px;
  }
  #page.iflame .flame_stretch.flame_balloon .balloon_tip:before, #page.iflame .flame_stretch.flame_balloon .balloon_tip:after {
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
  }
  #page.iflame .flame_stretch.flame_balloon.tip_right {
    padding: 0 3px 0 3px;
    margin-top: 2px;
  }
  #page.iflame .flame_stretch.flame_balloon.tip_right > .balloon_tip {
    top: auto;
    bottom: 5px;
    left: auto;
    right: 5px;
  }
  #page.iflame .flame_stretch.flame_balloon.tip_right > .balloon_tip:before, #page.iflame .flame_stretch.flame_balloon.tip_right > .balloon_tip:after {
    -moz-transform: scaleX(-1) rotate(-70deg);
    -ms-transform: scaleX(-1) rotate(-70deg);
    -webkit-transform: scaleX(-1) rotate(-70deg);
    transform: scaleX(-1) rotate(-70deg);
  }
  #page.iflame .balloon_body.rounded {
    /*-吹き出し本体-*/
    min-height: 45px;
  }
  #page.iflame .chara_base2.size_m {
    width: 40px;
    height: 32px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  #page.iflame .chara_base2.size_m:after {
    border-width: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
  }
  #page.iflame .chara_base2.size_m img {
    height: 28px;
    margin-left: -14px;
    bottom: 4px;
  }
  #page.iflame .balloon_tip {
    top: 10px;
    left: -10px;
  }
  #page.iflame .tip_right > .balloon_tip {
    right: -10px;
  }
  #page.iflame .contents .header_title {
    font-size: 95%;
  }
  #page.iflame .chat_log_ul li {
    padding-left: 2px;
    padding-top: 30px;
    padding-right: 2px;
    padding-top: 5px;
  }
  #page.iflame .chat_log_ul li:first-child {
    /*-最初のliはヘッダーにめり込んでいるので-*/
    padding-top: 34px;
    padding-top: 8px;
  }
  #page.iflame .chat_log_ul li:first-child img {
    top: 5px;
  }
  #page.iflame .chat_log_ul li img {
    width: 26px;
    height: 26px;
    left: 2%;
    top: 2px;
    position: static;
    float: left;
  }
  #page.iflame .chat_log_ul li span {
    float: right;
    color: #ccc;
    font-size: 80%;
    margin-left: 0.6em;
  }
  #page.iflame .contents_inner .other_area {
    /*-直下の.other_areaを表示-*/
    width: 50% !important;
  }
  #page.iflame .sub_wraper {
    width: 50% !important;
  }
  #page.iflame .contents .header_inner {
    /*-移動先ヘッダー-*/
    width: 50%;
  }
}
.bottom_up {
  /*-これが100％のサイズの底上げになる-*/
  width: 100%;
  height: auto;
  height: 10%;
  position: relative;
  display: block;
}
.bottom_up:before {
  content: "";
  display: block;
  padding-top: 58%;
  /* コンテンツと同じ大きさにする */
}

.chat_log_ul {
  color: #fff;
}
.chat_log_ul li {
  min-height: 40px;
  position: relative;
  padding: 5px;
  padding-left: 40px;
  padding-right: 5px;
  overflow: hidden;
  *zoom: 1;
}
.chat_log_ul li:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.08);
}
.chat_log_ul li:after {
  content: "";
  display: block;
  position: absolute;
  left: 2%;
  right: 2%;
  height: 1px;
  bottom: 0;
  background-color: #999;
}
.chat_log_ul li img {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 2%;
  top: 5px;
}
.chat_log_ul li span {
  float: right;
  color: #ccc;
  font-size: 80%;
  margin-left: 0.6em;
}

/*-iflame用ゲーム画面内ログ表示(可変)-*/
.list_menu_wrapper3 {
  /*-外枠位置調整-*/
  position: absolute;
  top: 0;
  left: 0%;
  right: 0%;
  bottom: 0;
}

.list_menu3 {
  /*-内部　paddingで縦サイズ調整-*/
  position: relative;
  position: absolute;
  width: 100%;
  height: 0;
  padding: 24% 0 0;
  bottom: 0;
  /*-半透明-*/
  margin-top: 3px;
}

.list_menu_inner3 {
  /*-さらに内側　position:absoluteで範囲を全体に広げる-*/
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  *zoom: 1;
}

.iflame_flex#page {
  min-width: 0;
}
.iflame_flex#page .list_menu_inner3 {
  text-align: left;
}
.iflame_flex#page .list_menu_inner3 .sub_wraper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  width: 50% !important;
  border-right: 1px solid #fff;
}
.iflame_flex#page .list_menu_inner3 .header_inner {
  width: 50%;
  display: block;
  background-color: #ecfacf;
  margin: 0;
  height: auto;
  padding: 3px 3px 5px;
  border-top: 2px solid #9cd229;
  position: relative;
  float: right;
  min-height: inherit;
  top: 0;
}
.iflame_flex#page .list_menu_inner3 .header_inner .option_menu {
  right: 2px;
  top: auto;
  bottom: 0;
}
.iflame_flex#page .list_menu_inner3 .indicator {
  position: absolute;
}
.iflame_flex#page .list_menu_inner3 .indicator + .header_title {
  width: calc(100% - 65px - 45px);
  margin-left: 45px;
}
.iflame_flex#page .list_menu_inner3 .indicator.rec + .header_title {
  width: calc(100% - 65px - 55px);
  margin-left: 55px;
}
.iflame_flex#page .list_menu_inner3 .header_title {
  font-weight: bold;
  font-size: 120%;
  color: #7ca61b;
  display: inline-block;
  width: calc(100% - 60px);
  vertical-align: bottom;
  /*-初期値(長すぎたタイトルを省略する処理をリセット） → これを有効にする方向で進めることになったので無効化-*/
}
.iflame_flex#page .list_menu_inner3 .other_area {
  display: block;
  width: 50% !important;
  height: calc(100% - 31px);
  background-color: rgba(0, 0, 0, 0.7);
  position: static;
  float: right;
  margin-left: 100%;
}
.iflame_flex#page .contents_inner {
  margin-right: 0;
}

@media screen and (max-width: 600px) {
  /*-600px以下-*/
  .iflame_flex#page .list_menu_inner3 .header_inner {
    padding: 3px 3px 0;
  }
  .iflame_flex#page .list_menu_inner3 .other_area {
    height: calc(100% - 27px);
  }
  .iflame_flex#page .list_menu_inner3 .indicator {
    padding: 2px 5px;
    width: auto;
  }
  .iflame_flex#page .list_menu_inner3 .indicator + .header_title {
    width: calc(100% - 55px - 35px);
    margin-left: 35px;
  }
  .iflame_flex#page .list_menu_inner3 .indicator.rec + .header_title {
    width: calc(100% - 55px - 50px);
    margin-left: 50px;
  }
  .iflame_flex#page .list_menu_inner3 .indicator.soon + .header_title, .iflame_flex#page .list_menu_inner3 .indicator.next + .header_title {
    width: calc(100% - 55px - 40px);
    margin-left: 40px;
  }
  .iflame_flex#page .list_menu_inner3 .header_title {
    font-size: 100%;
    /*-長すぎたタイトルを省略する処理-*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .iflame_flex#page .list_menu_inner3 .header_title:before {
    display: none;
    background-color: #f00;
  }
  .iflame_flex#page .list_menu_inner3 .option_menu {
    float: right;
    position: static;
    height: 100%;
    height: 25px;
    margin-top: -3px;
    margin-right: -5px;
  }
}
/*-イベントカレンダー設定-*/
/*- divを高さ100％にする基本設定 -*/
.event_calendar {
  /*-イベントカレンダーtable-*/
  width: 100%;
  table-layout: fixed;
  margin: 10px auto;
  padding: 10px;
}
.event_calendar th {
  text-align: center;
  vertical-align: middle;
  position: relative;
}
.event_calendar th:not(:empty) {
  /*-中身が空以外の処理-*/
  position: relative;
}

.subheading_p {
  /*-見出し-*/
  font-weight: bold;
  font-size: 120%;
  padding: 0 10px;
  display: inline-block;
  background-color: #b5e36b;
  color: #0c9100;
  border-radius: 10px 10px;
  margin: 5px;
}

.event_calendar_heading {
  /*-見出しフロート解除用-*/
  overflow: hidden;
  *zoom: 1;
}

.event_calendar_wrap {
  background-color: #f7f4ed;
  padding: 5px;
  margin: 5px;
  border: 1px solid #c9bd9f;
  border-radius: 10px;
  width: auto;
  table-layout: fixed;
}
.event_calendar_wrap .subheading_p:nth-of-type(1) {
  float: left;
  margin-left: 50px;
}
.event_calendar_wrap .subheading_p:nth-of-type(2) {
  float: right;
  margin-right: 0;
}

.event_calendar_header th {
  position: relative;
  z-index: 10;
  color: #0c9100;
  background-color: transparent;
}
.event_calendar_header th span {
  /*-曜日-*/
  opacity: 0.8;
  margin-left: 3px;
  font-size: 80%;
}
.event_calendar_header th:before {
  /*-タブ風の背景-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 10px 10px 0 0;
  background-color: #b5e36b;
  z-index: -1;
}
.event_calendar_header th:last-child {
  /*-日曜-*/
  color: #c12222;
}
.event_calendar_header th:last-child:before {
  background-color: #ffa5a5;
}
.event_calendar_header th:nth-last-child(2) {
  /*-土曜-*/
  color: #006ce5;
}
.event_calendar_header th:nth-last-child(2):before {
  background-color: #a8d1ff;
}
.event_calendar_header th.past_day {
  /*-前月や翌月の表示-*/
  /*-灰色-*/
  color: #a9a9a9;
}
.event_calendar_header th.past_day:before {
  background-color: rgba(153, 153, 153, 0.15);
}

.side_hour {
  /*-左時間表示-*/
  width: 4em;
  color: #948060;
  border-bottom: 1px solid #e1ddd5;
  border-right: 1px solid #e1ddd5;
}
.side_hour:empty {
  /*-空の場合-*/
  border: none;
}
.side_hour:empty:before {
  background-color: transparent;
}

.event_calendar_body td {
  font-size: 90%;
  border-bottom: 1px solid #e1ddd5;
  border-right: 2px solid #e1ddd5;
  vertical-align: top;
}
.event_calendar_body td:last-of-type {
  /*-最後の行の処理-*/
  border-right-width: 1px;
}
.event_calendar_body td:not(:empty) {
  vertical-align: top;
}
.event_calendar_body td:last-child {
  /*-日曜-*/
  background-color: #fee8e8;
}
.event_calendar_body td:nth-last-child(2) {
  /*-土曜-*/
  background-color: #ebf4fe;
}
.event_calendar_body td:empty {
  /*-空のときの設定-*/
  background-color: rgba(255, 255, 255, 0.7);
  height: 0;
}
.event_calendar_body td:empty:last-child {
  /*-日曜-*/
  background-color: #fff4f4;
}
.event_calendar_body td:empty:nth-last-child(2) {
  /*-土曜-*/
  background-color: #f7fbff;
}
.event_calendar_body td.past_day {
  /*-前月や翌月の表示-*/
  /*-灰色2-*/
  color: #a9a9a9;
  background-color: rgba(102, 102, 102, 0.15);
  border: none;
}
.event_calendar_body td.past_day:empty {
  background-color: rgba(179, 179, 179, 0.15);
}

.td_info {
  height: 100px;
  position: relative;
}

.td_info_div {
  height: 100%;
  position: relative;
}

.event_info {
  /*-スケジュールエリア基本-*/
  display: block;
  border: 1px solid #bae16a;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZjZhNyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWVmYWQ1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGNmNmE3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcf6a7), color-stop(50%, #eefad5), color-stop(100%, #dcf6a7));
  background-image: -moz-linear-gradient(top, #dcf6a7, #eefad5 50%, #dcf6a7);
  background-image: -webkit-linear-gradient(top, #dcf6a7, #eefad5 50%, #dcf6a7);
  background-image: linear-gradient(to bottom, #dcf6a7, #eefad5 50%, #dcf6a7);
  border-radius: 3px;
  width: calc(100% - 6px);
  padding: 1px 3px;
  margin-left: 3px;
  color: #5a5a5a;
  position: absolute;
}
.event_info span {
  /*-時間帯表示-*/
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0 2px;
  border-radius: 3px;
  color: #4E85FF;
  font-weight: bold;
  font-size: 90%;
}
.event_info.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZjZhNyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWVmYWQ1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGNmNmE3IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcf6a7), color-stop(50%, #eefad5), color-stop(100%, rgba(220, 246, 167, 0)));
  background-image: -moz-linear-gradient(top, #dcf6a7, #eefad5 50%, rgba(220, 246, 167, 0));
  background-image: -webkit-linear-gradient(top, #dcf6a7, #eefad5 50%, rgba(220, 246, 167, 0));
  background-image: linear-gradient(to bottom, #dcf6a7, #eefad5 50%, rgba(220, 246, 167, 0));
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 100px;
}
.event_info.over_area.single_col {
  background: #e5f8be;
}
.event_info.single_col {
  background: #e5f8be;
}
.event_info.today_area {
  background: rgba(255, 230, 230, 0.5);
  z-index: 0;
  border: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.height10m {
  /*- 10分スペース-*/
  height: 16.66667%;
}

.height20m {
  /*- 20分スペース-*/
  height: 33.33333%;
}

.height30m {
  /*- 30分スペース-*/
  height: 50%;
}

.height40m {
  /*- 40分スペース-*/
  height: 66.66667%;
}

.height50m {
  /*- 50分スペース-*/
  height: 83.33333%;
}

.height60m {
  /*- 60分スペース-*/
  height: 100%;
}

td[rowspan^="2"].td_info {
  /* 2行結合状態 */
  height: 200px;
}
td[rowspan^="2"].td_info .height10m {
  /*- 10分スペース-*/
  height: 8.33333%;
}
td[rowspan^="2"].td_info .height20m {
  /*- 20分スペース-*/
  height: 16.66667%;
}
td[rowspan^="2"].td_info .height30m {
  /*- 30分スペース-*/
  height: 25%;
}
td[rowspan^="2"].td_info .height40m {
  /*- 40分スペース-*/
  height: 33.33333%;
}
td[rowspan^="2"].td_info .height50m {
  /*- 50分スペース-*/
  height: 41.66667%;
}
td[rowspan^="2"].td_info .height60m {
  /*- 60分スペース-*/
  height: 50%;
}

td[rowspan^="3"].td_info {
  /* 3行結合状態 */
  height: 300px;
}
td[rowspan^="3"].td_info .height10m {
  /*- 10分スペース-*/
  height: 5.55556%;
}
td[rowspan^="3"].td_info .height20m {
  /*- 20分スペース-*/
  height: 11.11111%;
}
td[rowspan^="3"].td_info .height30m {
  /*- 30分スペース-*/
  height: 16.66667%;
}
td[rowspan^="3"].td_info .height40m {
  /*- 40分スペース-*/
  height: 22.22222%;
}
td[rowspan^="3"].td_info .height50m {
  /*- 50分スペース-*/
  height: 27.77778%;
}
td[rowspan^="3"].td_info .height60m {
  /*- 60分スペース-*/
  height: 33.33333%;
}

td[rowspan^="4"].td_info {
  /* 4行結合状態 */
  height: 400px;
}
td[rowspan^="4"].td_info .height10m {
  /*- 10分スペース-*/
  height: 4.16667%;
}
td[rowspan^="4"].td_info .height20m {
  /*- 20分スペース-*/
  height: 8.33333%;
}
td[rowspan^="4"].td_info .height30m {
  /*- 30分スペース-*/
  height: 12.5%;
}
td[rowspan^="4"].td_info .height40m {
  /*- 40分スペース-*/
  height: 16.66667%;
}
td[rowspan^="4"].td_info .height50m {
  /*- 50分スペース-*/
  height: 20.83333%;
}
td[rowspan^="4"].td_info .height60m {
  /*- 60分スペース-*/
  height: 25%;
}

td[rowspan^="5"].td_info {
  /* 5行結合状態 */
  height: 500px;
}
td[rowspan^="5"].td_info .height10m {
  /*- 10分スペース-*/
  height: 3.33333%;
}
td[rowspan^="5"].td_info .height20m {
  /*- 20分スペース-*/
  height: 6.66667%;
}
td[rowspan^="5"].td_info .height30m {
  /*- 30分スペース-*/
  height: 10%;
}
td[rowspan^="5"].td_info .height40m {
  /*- 40分スペース-*/
  height: 13.33333%;
}
td[rowspan^="5"].td_info .height50m {
  /*- 50分スペース-*/
  height: 16.66667%;
}
td[rowspan^="5"].td_info .height60m {
  /*- 60分スペース-*/
  height: 20%;
}

td[rowspan^="6"].td_info {
  /* 6行結合状態 */
  height: 600px;
}
td[rowspan^="6"].td_info .height10m {
  /*- 10分スペース-*/
  height: 2.77778%;
}
td[rowspan^="6"].td_info .height20m {
  /*- 20分スペース-*/
  height: 5.55556%;
}
td[rowspan^="6"].td_info .height30m {
  /*- 30分スペース-*/
  height: 8.33333%;
}
td[rowspan^="6"].td_info .height40m {
  /*- 40分スペース-*/
  height: 11.11111%;
}
td[rowspan^="6"].td_info .height50m {
  /*- 50分スペース-*/
  height: 13.88889%;
}
td[rowspan^="6"].td_info .height60m {
  /*- 60分スペース-*/
  height: 16.66667%;
}

td[rowspan^="7"].td_info {
  /* 7行結合状態 */
  height: 700px;
}
td[rowspan^="7"].td_info .height10m {
  /*- 10分スペース-*/
  height: 2.38095%;
}
td[rowspan^="7"].td_info .height20m {
  /*- 20分スペース-*/
  height: 4.7619%;
}
td[rowspan^="7"].td_info .height30m {
  /*- 30分スペース-*/
  height: 7.14286%;
}
td[rowspan^="7"].td_info .height40m {
  /*- 40分スペース-*/
  height: 9.52381%;
}
td[rowspan^="7"].td_info .height50m {
  /*- 50分スペース-*/
  height: 11.90476%;
}
td[rowspan^="7"].td_info .height60m {
  /*- 60分スペース-*/
  height: 14.28571%;
}

td[rowspan^="8"].td_info {
  /* 8行結合状態 */
  height: 800px;
}
td[rowspan^="8"].td_info .height10m {
  /*- 10分スペース-*/
  height: 2.08333%;
}
td[rowspan^="8"].td_info .height20m {
  /*- 20分スペース-*/
  height: 4.16667%;
}
td[rowspan^="8"].td_info .height30m {
  /*- 30分スペース-*/
  height: 6.25%;
}
td[rowspan^="8"].td_info .height40m {
  /*- 40分スペース-*/
  height: 8.33333%;
}
td[rowspan^="8"].td_info .height50m {
  /*- 50分スペース-*/
  height: 10.41667%;
}
td[rowspan^="8"].td_info .height60m {
  /*- 60分スペース-*/
  height: 12.5%;
}

td[rowspan^="9"].td_info {
  /* 9行結合状態 */
  height: 900px;
}
td[rowspan^="9"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.85185%;
}
td[rowspan^="9"].td_info .height20m {
  /*- 20分スペース-*/
  height: 3.7037%;
}
td[rowspan^="9"].td_info .height30m {
  /*- 30分スペース-*/
  height: 5.55556%;
}
td[rowspan^="9"].td_info .height40m {
  /*- 40分スペース-*/
  height: 7.40741%;
}
td[rowspan^="9"].td_info .height50m {
  /*- 50分スペース-*/
  height: 9.25926%;
}
td[rowspan^="9"].td_info .height60m {
  /*- 60分スペース-*/
  height: 11.11111%;
}

td[rowspan^="10"].td_info {
  /* 10行結合状態 */
  height: 1000px;
}
td[rowspan^="10"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.66667%;
}
td[rowspan^="10"].td_info .height20m {
  /*- 20分スペース-*/
  height: 3.33333%;
}
td[rowspan^="10"].td_info .height30m {
  /*- 30分スペース-*/
  height: 5%;
}
td[rowspan^="10"].td_info .height40m {
  /*- 40分スペース-*/
  height: 6.66667%;
}
td[rowspan^="10"].td_info .height50m {
  /*- 50分スペース-*/
  height: 8.33333%;
}
td[rowspan^="10"].td_info .height60m {
  /*- 60分スペース-*/
  height: 10%;
}

td[rowspan^="11"].td_info {
  /* 11行結合状態 */
  height: 1100px;
}
td[rowspan^="11"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.51515%;
}
td[rowspan^="11"].td_info .height20m {
  /*- 20分スペース-*/
  height: 3.0303%;
}
td[rowspan^="11"].td_info .height30m {
  /*- 30分スペース-*/
  height: 4.54545%;
}
td[rowspan^="11"].td_info .height40m {
  /*- 40分スペース-*/
  height: 6.06061%;
}
td[rowspan^="11"].td_info .height50m {
  /*- 50分スペース-*/
  height: 7.57576%;
}
td[rowspan^="11"].td_info .height60m {
  /*- 60分スペース-*/
  height: 9.09091%;
}

td[rowspan^="12"].td_info {
  /* 12行結合状態 */
  height: 1200px;
}
td[rowspan^="12"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.38889%;
}
td[rowspan^="12"].td_info .height20m {
  /*- 20分スペース-*/
  height: 2.77778%;
}
td[rowspan^="12"].td_info .height30m {
  /*- 30分スペース-*/
  height: 4.16667%;
}
td[rowspan^="12"].td_info .height40m {
  /*- 40分スペース-*/
  height: 5.55556%;
}
td[rowspan^="12"].td_info .height50m {
  /*- 50分スペース-*/
  height: 6.94444%;
}
td[rowspan^="12"].td_info .height60m {
  /*- 60分スペース-*/
  height: 8.33333%;
}

td[rowspan^="13"].td_info {
  /* 13行結合状態 */
  height: 1300px;
}
td[rowspan^="13"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.28205%;
}
td[rowspan^="13"].td_info .height20m {
  /*- 20分スペース-*/
  height: 2.5641%;
}
td[rowspan^="13"].td_info .height30m {
  /*- 30分スペース-*/
  height: 3.84615%;
}
td[rowspan^="13"].td_info .height40m {
  /*- 40分スペース-*/
  height: 5.12821%;
}
td[rowspan^="13"].td_info .height50m {
  /*- 50分スペース-*/
  height: 6.41026%;
}
td[rowspan^="13"].td_info .height60m {
  /*- 60分スペース-*/
  height: 7.69231%;
}

td[rowspan^="14"].td_info {
  /* 14行結合状態 */
  height: 1400px;
}
td[rowspan^="14"].td_info .height10m {
  /*- 10分スペース-*/
  height: 1.19048%;
}
td[rowspan^="14"].td_info .height20m {
  /*- 20分スペース-*/
  height: 2.38095%;
}
td[rowspan^="14"].td_info .height30m {
  /*- 30分スペース-*/
  height: 3.57143%;
}
td[rowspan^="14"].td_info .height40m {
  /*- 40分スペース-*/
  height: 4.7619%;
}
td[rowspan^="14"].td_info .height50m {
  /*- 50分スペース-*/
  height: 5.95238%;
}
td[rowspan^="14"].td_info .height60m {
  /*- 60分スペース-*/
  height: 7.14286%;
}

/*-背景色設定-*/
.bg_col00 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYjhiYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZlYWViIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmViOGJjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feb8bc), color-stop(50%, #ffeaeb), color-stop(100%, #feb8bc));
  background-image: -moz-linear-gradient(top, #feb8bc, #ffeaeb 50%, #feb8bc);
  background-image: -webkit-linear-gradient(top, #feb8bc, #ffeaeb 50%, #feb8bc);
  background-image: linear-gradient(to bottom, #feb8bc, #ffeaeb 50%, #feb8bc);
  border: 1px solid #f6a6ab;
}
.bg_col00.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYjhiYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmViOGJjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmViOGJjIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feb8bc), color-stop(50%, #feb8bc), color-stop(100%, rgba(254, 184, 188, 0)));
  background-image: -moz-linear-gradient(top, #feb8bc, #feb8bc 50%, rgba(254, 184, 188, 0));
  background-image: -webkit-linear-gradient(top, #feb8bc, #feb8bc 50%, rgba(254, 184, 188, 0));
  background-image: linear-gradient(to bottom, #feb8bc, #feb8bc 50%, rgba(254, 184, 188, 0));
}
.bg_col00.over_area.single_col {
  background: #feb8bc;
}
.bg_col00.single_col {
  background: #feb8bc;
}

.bg_col01 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDhhMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmMmRmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZkOGEyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd8a2), color-stop(50%, #fff2df), color-stop(100%, #ffd8a2));
  background-image: -moz-linear-gradient(top, #ffd8a2, #fff2df 50%, #ffd8a2);
  background-image: -webkit-linear-gradient(top, #ffd8a2, #fff2df 50%, #ffd8a2);
  background-image: linear-gradient(to bottom, #ffd8a2, #fff2df 50%, #ffd8a2);
  border: 1px solid #f4c17a;
}
.bg_col01.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDhhMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmMmRmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZkOGEyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd8a2), color-stop(50%, #fff2df), color-stop(100%, rgba(255, 216, 162, 0)));
  background-image: -moz-linear-gradient(top, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
  background-image: -webkit-linear-gradient(top, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
  background-image: linear-gradient(to bottom, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
}
.bg_col01.over_area.single_col {
  background: #ffd8a2;
}
.bg_col01.single_col {
  background: #ffd8a2;
}

.bg_col02 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZWRiMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmOWU1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZlZGIyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffedb2), color-stop(50%, #fff9e5), color-stop(100%, #ffedb2));
  background-image: -moz-linear-gradient(top, #ffedb2, #fff9e5 50%, #ffedb2);
  background-image: -webkit-linear-gradient(top, #ffedb2, #fff9e5 50%, #ffedb2);
  background-image: linear-gradient(to bottom, #ffedb2, #fff9e5 50%, #ffedb2);
  border: 1px solid #f5ca3d;
}
.bg_col02.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZDhhMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmMmRmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZkOGEyIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffd8a2), color-stop(50%, #fff2df), color-stop(100%, rgba(255, 216, 162, 0)));
  background-image: -moz-linear-gradient(top, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
  background-image: -webkit-linear-gradient(top, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
  background-image: linear-gradient(to bottom, #ffd8a2, #fff2df 50%, rgba(255, 216, 162, 0));
}
.bg_col02.over_area.single_col {
  background: #ffedb2;
}
.bg_col02.single_col {
  background: #ffedb2;
}

.bg_col03 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjk5OSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZWU2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmOTk5Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff999), color-stop(50%, #fffee6), color-stop(100%, #fff999));
  background-image: -moz-linear-gradient(top, #fff999, #fffee6 50%, #fff999);
  background-image: -webkit-linear-gradient(top, #fff999, #fffee6 50%, #fff999);
  background-image: linear-gradient(to bottom, #fff999, #fffee6 50%, #fff999);
  border: 1px solid #dfd20c;
}
.bg_col03.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjk5OSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZWU2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmOTk5IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff999), color-stop(50%, #fffee6), color-stop(100%, rgba(255, 249, 153, 0)));
  background-image: -moz-linear-gradient(top, #fff999, #fffee6 50%, rgba(255, 249, 153, 0));
  background-image: -webkit-linear-gradient(top, #fff999, #fffee6 50%, rgba(255, 249, 153, 0));
  background-image: linear-gradient(to bottom, #fff999, #fffee6 50%, rgba(255, 249, 153, 0));
}
.bg_col03.over_area.single_col {
  background: #fffccc;
}
.bg_col03.single_col {
  background: #fffccc;
}

.bg_col04 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZjJhNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTVmYWRiIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmZmMmE2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bff2a6), color-stop(50%, #e5fadb), color-stop(100%, #bff2a6));
  background-image: -moz-linear-gradient(top, #bff2a6, #e5fadb 50%, #bff2a6);
  background-image: -webkit-linear-gradient(top, #bff2a6, #e5fadb 50%, #bff2a6);
  background-image: linear-gradient(to bottom, #bff2a6, #e5fadb 50%, #bff2a6);
  border: 1px solid #95d675;
}
.bg_col04.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmZjJhNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTVmYWRiIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmZmMmE2IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bff2a6), color-stop(50%, #e5fadb), color-stop(100%, rgba(191, 242, 166, 0)));
  background-image: -moz-linear-gradient(top, #bff2a6, #e5fadb 50%, rgba(191, 242, 166, 0));
  background-image: -webkit-linear-gradient(top, #bff2a6, #e5fadb 50%, rgba(191, 242, 166, 0));
  background-image: linear-gradient(to bottom, #bff2a6, #e5fadb 50%, rgba(191, 242, 166, 0));
}
.bg_col04.over_area.single_col {
  background: #bff2a6;
}
.bg_col04.single_col {
  background: #bff2a6;
}

.bg_col05 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2ZjRkNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFmY2Y1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzZmNGQ2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6f4d6), color-stop(50%, #f1fcf5), color-stop(100%, #c6f4d6));
  background-image: -moz-linear-gradient(top, #c6f4d6, #f1fcf5 50%, #c6f4d6);
  background-image: -webkit-linear-gradient(top, #c6f4d6, #f1fcf5 50%, #c6f4d6);
  background-image: linear-gradient(to bottom, #c6f4d6, #f1fcf5 50%, #c6f4d6);
  border: 1px solid #81dda1;
}
.bg_col05.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2ZjRkNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFmY2Y1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzZmNGQ2IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6f4d6), color-stop(50%, #f1fcf5), color-stop(100%, rgba(198, 244, 214, 0)));
  background-image: -moz-linear-gradient(top, #c6f4d6, #f1fcf5 50%, rgba(198, 244, 214, 0));
  background-image: -webkit-linear-gradient(top, #c6f4d6, #f1fcf5 50%, rgba(198, 244, 214, 0));
  background-image: linear-gradient(to bottom, #c6f4d6, #f1fcf5 50%, rgba(198, 244, 214, 0));
}
.bg_col05.over_area.single_col {
  background: #c6f4d6;
}
.bg_col05.single_col {
  background: #c6f4d6;
}

.bg_col06 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M0ZTZmOCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjJmOWZkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzRlNmY4Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c4e6f8), color-stop(50%, #f2f9fd), color-stop(100%, #c4e6f8));
  background-image: -moz-linear-gradient(top, #c4e6f8, #f2f9fd 50%, #c4e6f8);
  background-image: -webkit-linear-gradient(top, #c4e6f8, #f2f9fd 50%, #c4e6f8);
  background-image: linear-gradient(to bottom, #c4e6f8, #f2f9fd 50%, #c4e6f8);
  border: 1px solid #8ac6e5;
}
.bg_col06.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M0ZTZmOCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjJmOWZkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzRlNmY4IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c4e6f8), color-stop(50%, #f2f9fd), color-stop(100%, rgba(196, 230, 248, 0)));
  background-image: -moz-linear-gradient(top, #c4e6f8, #f2f9fd 50%, rgba(196, 230, 248, 0));
  background-image: -webkit-linear-gradient(top, #c4e6f8, #f2f9fd 50%, rgba(196, 230, 248, 0));
  background-image: linear-gradient(to bottom, #c4e6f8, #f2f9fd 50%, rgba(196, 230, 248, 0));
}
.bg_col06.over_area.single_col {
  background: #c4e6f8;
}
.bg_col06.single_col {
  background: #c4e6f8;
}

.bg_col07 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiY2RmYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWNmMWZlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmJjZGZjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbcdfc), color-stop(50%, #ecf1fe), color-stop(100%, #bbcdfc));
  background-image: -moz-linear-gradient(top, #bbcdfc, #ecf1fe 50%, #bbcdfc);
  background-image: -webkit-linear-gradient(top, #bbcdfc, #ecf1fe 50%, #bbcdfc);
  background-image: linear-gradient(to bottom, #bbcdfc, #ecf1fe 50%, #bbcdfc);
  border: 1px solid #94b0fa;
}
.bg_col07.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiY2RmYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWNmMWZlIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmJjZGZjIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbcdfc), color-stop(50%, #ecf1fe), color-stop(100%, rgba(187, 205, 252, 0)));
  background-image: -moz-linear-gradient(top, #bbcdfc, #ecf1fe 50%, rgba(187, 205, 252, 0));
  background-image: -webkit-linear-gradient(top, #bbcdfc, #ecf1fe 50%, rgba(187, 205, 252, 0));
  background-image: linear-gradient(to bottom, #bbcdfc, #ecf1fe 50%, rgba(187, 205, 252, 0));
}
.bg_col07.over_area.single_col {
  background: #bbcdfc;
}
.bg_col07.single_col {
  background: #bbcdfc;
}

.bg_col08 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0YzNmZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFlYmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDRjM2ZlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d4c3fe), color-stop(50%, #f1ebff), color-stop(100%, #d4c3fe));
  background-image: -moz-linear-gradient(top, #d4c3fe, #f1ebff 50%, #d4c3fe);
  background-image: -webkit-linear-gradient(top, #d4c3fe, #f1ebff 50%, #d4c3fe);
  background-image: linear-gradient(to bottom, #d4c3fe, #f1ebff 50%, #d4c3fe);
  border: 1px solid #b79bfd;
}
.bg_col08.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0YzNmZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjFlYmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDRjM2ZlIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d4c3fe), color-stop(50%, #f1ebff), color-stop(100%, rgba(212, 195, 254, 0)));
  background-image: -moz-linear-gradient(top, #d4c3fe, #f1ebff 50%, rgba(212, 195, 254, 0));
  background-image: -webkit-linear-gradient(top, #d4c3fe, #f1ebff 50%, rgba(212, 195, 254, 0));
  background-image: linear-gradient(to bottom, #d4c3fe, #f1ebff 50%, rgba(212, 195, 254, 0));
}
.bg_col08.over_area.single_col {
  background: #d4c3fe;
}
.bg_col08.single_col {
  background: #d4c3fe;
}

.bg_col09 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjYmRlNCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjdlNWY0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWNiZGU0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ecbde4), color-stop(50%, #f7e5f4), color-stop(100%, #ecbde4));
  background-image: -moz-linear-gradient(top, #ecbde4, #f7e5f4 50%, #ecbde4);
  background-image: -webkit-linear-gradient(top, #ecbde4, #f7e5f4 50%, #ecbde4);
  background-image: linear-gradient(to bottom, #ecbde4, #f7e5f4 50%, #ecbde4);
  border: 1px solid #d295c7;
}
.bg_col09.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjYmRlNCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjdlNWY0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWNiZGU0IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ecbde4), color-stop(50%, #f7e5f4), color-stop(100%, rgba(236, 189, 228, 0)));
  background-image: -moz-linear-gradient(top, #ecbde4, #f7e5f4 50%, rgba(236, 189, 228, 0));
  background-image: -webkit-linear-gradient(top, #ecbde4, #f7e5f4 50%, rgba(236, 189, 228, 0));
  background-image: linear-gradient(to bottom, #ecbde4, #f7e5f4 50%, rgba(236, 189, 228, 0));
}
.bg_col09.over_area.single_col {
  background: #ecbde4;
}
.bg_col09.single_col {
  background: #ecbde4;
}

.bg_col10 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZDhiYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjdlZmU0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWNkOGJjIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ecd8bc), color-stop(50%, #f7efe4), color-stop(100%, #ecd8bc));
  background-image: -moz-linear-gradient(top, #ecd8bc, #f7efe4 50%, #ecd8bc);
  background-image: -webkit-linear-gradient(top, #ecd8bc, #f7efe4 50%, #ecd8bc);
  background-image: linear-gradient(to bottom, #ecd8bc, #f7efe4 50%, #ecd8bc);
  border: 1px solid #ccaf85;
}
.bg_col10.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZDhiYyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjdlZmU0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWNkOGJjIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ecd8bc), color-stop(50%, #f7efe4), color-stop(100%, rgba(236, 216, 188, 0)));
  background-image: -moz-linear-gradient(top, #ecd8bc, #f7efe4 50%, rgba(236, 216, 188, 0));
  background-image: -webkit-linear-gradient(top, #ecd8bc, #f7efe4 50%, rgba(236, 216, 188, 0));
  background-image: linear-gradient(to bottom, #ecd8bc, #f7efe4 50%, rgba(236, 216, 188, 0));
}
.bg_col10.over_area.single_col {
  background: #ecd8bc;
}
.bg_col10.single_col {
  background: #ecd8bc;
}

.bg_col11 {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjNmM2YzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDlkOWQ5Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(50%, #f3f3f3), color-stop(100%, #d9d9d9));
  background-image: -moz-linear-gradient(top, #d9d9d9, #f3f3f3 50%, #d9d9d9);
  background-image: -webkit-linear-gradient(top, #d9d9d9, #f3f3f3 50%, #d9d9d9);
  background-image: linear-gradient(to bottom, #d9d9d9, #f3f3f3 50%, #d9d9d9);
  border: 1px solid #b8b8b8;
}
.bg_col11.over_area {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjNmM2YzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDlkOWQ5IiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d9d9d9), color-stop(50%, #f3f3f3), color-stop(100%, rgba(217, 217, 217, 0)));
  background-image: -moz-linear-gradient(top, #d9d9d9, #f3f3f3 50%, rgba(217, 217, 217, 0));
  background-image: -webkit-linear-gradient(top, #d9d9d9, #f3f3f3 50%, rgba(217, 217, 217, 0));
  background-image: linear-gradient(to bottom, #d9d9d9, #f3f3f3 50%, rgba(217, 217, 217, 0));
}
.bg_col11.over_area.single_col {
  background: #d9d9d9;
}
.bg_col11.single_col {
  background: #d9d9d9;
}

/*-スケジュール2-*/
.event_calendar_wrap2 {
  background-color: #f7f4ed;
  padding: 5px;
  margin: 5px;
  border: 1px solid #c9bd9f;
  border-radius: 10px;
  width: auto;
  position: relative;
  font-size: 90%;
}
.event_calendar_wrap2 .event_area_div {
  border-top: 1px solid #e1ddd5;
}
.event_calendar_wrap2 .event_area_div:last-of-type {
  border-bottom: 1px solid #e1ddd5;
}

.event_area_div,
.calendar_head {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
.event_area_div > div,
.calendar_head > div {
  display: table-cell;
  position: relative;
}

.calendar_head div {
  z-index: 10;
  color: #0c9100;
  background-color: transparent;
  vertical-align: middle;
  text-align: center;
}
.calendar_head div span {
  /*-曜日-*/
  opacity: 0.8;
  margin-left: 3px;
  font-size: 80%;
}
.calendar_head div:before {
  /*-タブ風の背景-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 10px 10px 0 0;
  background-color: #b5e36b;
  z-index: -1;
}

.event_area_div {
  background-color: rgba(255, 255, 255, 0.7);
}
.event_area_div.over_area + .event_area_div > div {
  height: 90px;
}
.event_area_div > div {
  border-left: 1px solid #e1ddd5;
  border-right: 1px solid #e1ddd5;
  height: 90px;
}
.event_area_div > div:empty {
  /*-空の場合-*/
  height: 0;
}
.event_area_div > div:first-of-type {
  /*-空の場合-*/
  height: auto;
}
.event_area_div > div > p {
  width: 100%;
  z-index: 10;
  position: absolute;
  overflow: hidden;
}
.event_area_div > div > p span {
  font-size: 90%;
}

.calendar_side {
  width: 4em;
  color: #948060;
  vertical-align: middle;
  text-align: center;
}
.calendar_side:empty {
  /*-空の場合-*/
  border: none;
}
.calendar_side:empty:before {
  background-color: transparent;
}

/*-スケジュール3-*/
/*- divを高さ100％にする基本設定 -*/
.event_area_div3,
.calendar_head3 {
  height: 100%;
}
.event_area_div3 > div,
.calendar_head3 > div {
  height: 100%;
}
.event_area_div3 > div > .event_info_wrap,
.calendar_head3 > div > .event_info_wrap {
  height: 100%;
}

.event_calendar_wrap3 {
  background-color: #f7f4ed;
  padding: 5px;
  margin: 5px;
  border: 1px solid #c9bd9f;
  border-radius: 10px;
  width: auto;
  position: relative;
  font-size: 90%;
}
.event_calendar_wrap3 .event_area_div3 {
  border-top: 1px solid #e1ddd5;
}
.event_calendar_wrap3 .event_area_div3:last-of-type {
  border-bottom: 1px solid #e1ddd5;
}

.event_area_div3,
.calendar_head3 {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
.event_area_div3 > div,
.calendar_head3 > div {
  display: table-cell;
  position: relative;
  z-index: 10;
  vertical-align: top;
}

.calendar_head3 {
  height: 2em;
}
.calendar_head3 > div {
  z-index: 10;
  color: #0c9100;
  background-color: transparent;
  vertical-align: middle;
  text-align: center;
  padding: 2px 3px;
  width: 100%;
}
.calendar_head3 > div span {
  /*-曜日-*/
  opacity: 0.8;
  margin-left: 3px;
  font-size: 80%;
}
.calendar_head3 > div:before {
  /*-タブ風の背景-*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 10px 10px 0 0;
  background-color: #b5e36b;
  z-index: -1;
}

div.event_tab2 {
  width: 200%;
}
div.event_tab2 ~ div.event_tab2 {
  display: none;
}

div.event_tab2_2 {
  width: 200%;
}
div.event_tab2_2 ~ div.event_tab2_2 {
  display: none;
}

div.event_tab2_3 {
  width: 200%;
}
div.event_tab2_3 ~ div.event_tab2_3 {
  display: none;
}

div.event_tab2_4 {
  width: 200%;
}
div.event_tab2_4 ~ div.event_tab2_4 {
  display: none;
}

div.event_tab3 {
  width: 300%;
}
div.event_tab3 ~ div.event_tab3 {
  display: none;
}

div.event_tab3_2 {
  width: 300%;
}
div.event_tab3_2 ~ div.event_tab3_2 {
  display: none;
}

div.event_tab3_3 {
  width: 300%;
}
div.event_tab3_3 ~ div.event_tab3_3 {
  display: none;
}

div.event_tab3_4 {
  width: 300%;
}
div.event_tab3_4 ~ div.event_tab3_4 {
  display: none;
}

div.event_tab4 {
  width: 400%;
}
div.event_tab4 ~ div.event_tab4 {
  display: none;
}

div.event_tab4_2 {
  width: 400%;
}
div.event_tab4_2 ~ div.event_tab4_2 {
  display: none;
}

div.event_tab4_3 {
  width: 400%;
}
div.event_tab4_3 ~ div.event_tab4_3 {
  display: none;
}

div.event_tab4_4 {
  width: 400%;
}
div.event_tab4_4 ~ div.event_tab4_4 {
  display: none;
}

div.event_tab5 {
  width: 500%;
}
div.event_tab5 ~ div.event_tab5 {
  display: none;
}

div.event_tab5_2 {
  width: 500%;
}
div.event_tab5_2 ~ div.event_tab5_2 {
  display: none;
}

div.event_tab5_3 {
  width: 500%;
}
div.event_tab5_3 ~ div.event_tab5_3 {
  display: none;
}

div.event_tab5_4 {
  width: 500%;
}
div.event_tab5_4 ~ div.event_tab5_4 {
  display: none;
}

div.event_tab6 {
  width: 600%;
}
div.event_tab6 ~ div.event_tab6 {
  display: none;
}

div.event_tab6_2 {
  width: 600%;
}
div.event_tab6_2 ~ div.event_tab6_2 {
  display: none;
}

div.event_tab6_3 {
  width: 600%;
}
div.event_tab6_3 ~ div.event_tab6_3 {
  display: none;
}

div.event_tab6_4 {
  width: 600%;
}
div.event_tab6_4 ~ div.event_tab6_4 {
  display: none;
}

div.event_tab7 {
  width: 700%;
}
div.event_tab7 ~ div.event_tab7 {
  display: none;
}

div.event_tab7_2 {
  width: 700%;
}
div.event_tab7_2 ~ div.event_tab7_2 {
  display: none;
}

div.event_tab7_3 {
  width: 700%;
}
div.event_tab7_3 ~ div.event_tab7_3 {
  display: none;
}

div.event_tab7_4 {
  width: 700%;
}
div.event_tab7_4 ~ div.event_tab7_4 {
  display: none;
}

div.event_tab8 {
  width: 800%;
}
div.event_tab8 ~ div.event_tab8 {
  display: none;
}

div.event_tab8_2 {
  width: 800%;
}
div.event_tab8_2 ~ div.event_tab8_2 {
  display: none;
}

div.event_tab8_3 {
  width: 800%;
}
div.event_tab8_3 ~ div.event_tab8_3 {
  display: none;
}

div.event_tab8_4 {
  width: 800%;
}
div.event_tab8_4 ~ div.event_tab8_4 {
  display: none;
}

.event_area_div3 {
  background-color: #fdfcfa;
}
.event_area_div3 > div {
  border-left: 1px solid #e1ddd5;
  border-right: 1px solid #e1ddd5;
}
.event_area_div3 > div:nth-child(odd):not(.calendar_side3):before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background-color: #faf8f3;
  background-color: #fff;
}
.event_area_div3 > div:empty {
  /*-空の場合-*/
  height: 0;
}
.event_area_div3 > div:first-of-type {
  /*-空の場合-*/
  height: auto;
}
.event_area_div3 > div > p {
  width: 100%;
}
.event_area_div3 > div > p span {
  font-size: 90%;
}

/*-　月をまたぐ場合の処理 -*/
.bg_calendar {
  /*-非表示div用 背景色で塗りつぶす-*/
  background-color: #fdfcfa;
  border: none;
}

.calendar_side3 {
  width: 4em;
  color: #948060;
  vertical-align: middle;
  text-align: center;
}
.calendar_side3:empty {
  /*-空の場合-*/
  border: none;
  width: 4em;
}
.calendar_side3:empty:before {
  background-color: transparent;
}

/*-チャット-*/
.gamechat_base {
  margin: 10px 0;
  padding: 10px 5px;
  background-color: #f1efe9;
  border-radius: 10px;
}
.gamechat_base .chara_base3 {
  margin: 0 10px 0 10px;
  width: 130px;
}
.gamechat_base .chara_base3 img {
  width: 70%;
}
.gamechat_base .flame_stretch {
  padding: 0 5px;
}
.gamechat_base button {
  width: 170px;
}

.chat_flame_base {
  background-color: #ededdf;
  padding-top: 1px;
  margin: 5px 0;
  border-radius: 10px;
  overflow: hidden;
}
.chat_flame_base .common_flame {
  margin-left: 5px;
  margin-right: 5px;
}

.chat_list {
  background-color: #dbdbc8;
  border-top: 3px solid #d3d3bc;
  padding: 2px 5px 5px;
}
.chat_list .chat_list_inner {
  height: 300px;
  overflow: auto;
}

/*-チャット-*/
input[type="checkbox"].simple_chat_check {
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
}
input[type="checkbox"].simple_chat_check + .chat_flame .chat_bottom:after {
  /*-simple_chat_labelがボタンに隠れないように-*/
  content: "";
  display: block;
  height: 16px;
  opacity: 0.5;
  clear: both;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .simple_chat_label:before {
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -580px;
  background-repeat: no-repeat;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .flame_stretch {
  text-align: inherit;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .flame_stretch form {
  width: calc(100% - 96px);
  display: inline-block;
  vertical-align: middle;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .flame_stretch input[type="text"] {
  margin-top: 0;
  margin-bottom: 0;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .chara_base {
  -moz-transform: scale(0.375, 0.375);
  -ms-transform: scale(0.375, 0.375);
  -webkit-transform: scale(0.375, 0.375);
  transform: scale(0.375, 0.375);
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  margin-right: -80px;
  margin-bottom: -80px;
  border-radius: 16px;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .chat_bottom {
  display: inline-block;
  margin: 0;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .chat_face,
input[type="checkbox"].simple_chat_check:checked + .chat_flame .normal_b_div {
  float: inherit;
  margin: 0;
  vertical-align: middle;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .chat_face {
  display: none;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .normal_b_div button {
  height: inherit;
  margin: 0;
  vertical-align: middle;
}
input[type="checkbox"].simple_chat_check:checked + .chat_flame .normal_b_div button:first-of-type {
  /*-リロードボタンを非表示-*/
  display: none;
}

.chat_flame {
  background-color: #ededdf;
  border-radius: 8px;
  border: 1px solid #c7bfab;
  padding: 10px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 8px;
  width: 100%;
  position: relative;
}
.chat_flame .chara_base {
  border: none;
  background: rgba(0, 0, 0, 0.2);
}
.chat_flame .chara_base:before {
  display: none;
}
@media screen and (max-width: 1126px) {
  .chat_flame .chara_base {
    /*-$width_1000以下 -*/
    -moz-transform: scale(0.875, 0.875);
    -ms-transform: scale(0.875, 0.875);
    -webkit-transform: scale(0.875, 0.875);
    transform: scale(0.875, 0.875);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    margin-right: -16px;
    margin-bottom: -16px;
  }
}
.chat_flame .flame_l + .flame_stretch {
  padding-left: 10px;
}
.chat_flame div.flame_stretch {
  text-align: center;
}
.chat_flame input[type="text"] {
  width: 100%;
  margin: 10px auto;
  border: 1px solid #d1d1ae;
  max-width: 640px;
}
.chat_flame .simple_chat_label {
  /*-simpleモード用ラベル-*/
  position: absolute;
  background-color: #bdb49b;
  border: 1px solid #bdb49b;
  border-top-color: #aca183;
  display: inline-block;
  right: -1px;
  bottom: -1px;
  border-radius: 8px 0 8px 0;
  width: 32px;
  height: 24px;
}
.chat_flame .simple_chat_label:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 5px;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -620px;
  background-repeat: no-repeat;
  opacity: 0.9;
}
.chat_flame .simple_chat_label:hover {
  opacity: 0.65;
}

.chat_bottom {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  position: relative;
}
.chat_bottom > .chat_face {
  /*-inline-blockの隙間を無くすため-*/
  font-size: 0;
  float: left;
  margin-bottom: 5px;
  max-width: 208px;
  text-align: left;
}
.chat_bottom > .normal_b_div {
  float: right;
  display: inline-block;
  margin-left: 10px;
}
.chat_bottom button {
  height: 40px;
  margin-top: 0;
  margin-bottom: 0;
}

.chat_face {
  background-color: rgba(148, 148, 83, 0.3);
  position: relative;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 5px;
  z-index: 5;
}
.chat_face li {
  width: 28px;
  height: 25px;
  display: inline-block;
  vertical-align: top;
  background-image: url(../img/chat_face.png);
  -moz-background-size: 700% 100%;
  -o-background-size: 700% 100%;
  -webkit-background-size: 700% 100%;
  background-size: 700% 100%;
  cursor: pointer;
  position: relative;
  opacity: 0.8;
}
.chat_face li:before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 5px;
  z-index: -1;
  border: 1px solid #bfbf8d;
}
.chat_face li:hover {
  opacity: 1;
}
.chat_face li:hover:before {
  background-color: rgba(255, 255, 0, 0.7);
  border-color: transparent;
}
.chat_face li.select {
  opacity: 1;
}
.chat_face li.select:hover {
  opacity: 1;
  cursor: auto;
}
.chat_face li.select:before {
  top: 0;
  right: 1px;
  bottom: 0;
  left: 1px;
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

li.face00 {
  background-position: 0% 0;
}

li.face01 {
  background-position: -100% 0;
}

li.face02 {
  background-position: -200% 0;
}

li.face03 {
  background-position: -300% 0;
}

li.face04 {
  background-position: -400% 0;
}

li.face05 {
  background-position: -500% 0;
}

li.face06 {
  background-position: -600% 0;
}

li.face07 {
  background-position: -700% 0;
}

/*-サイドメニュー中身-*/
.student_header {
  width: 100%;
  margin: 0 auto;
  background-color: #a9dd31;
  position: relative;
  border: 1px solid #9bc341;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #679400;
  /*-marginの相殺を避けるため-*/
  padding-top: 1px;
}
.student_header:before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  bottom: 0;
  background-color: #effad7;
  border-radius: 10px 10px 0 0;
  width: 100%;
  z-index: 0;
}
.student_header p {
  position: relative;
  margin-top: 5px;
  padding-bottom: 2px;
  font-weight: bold;
  font-size: 120%;
  text-shadow: 0px 1px 1px rgba(51, 51, 51, 0.15);
  text-align: center;
}
.student_header + .student_div {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}

/*-ピンクスキン-*/
.pink_skin .student_header {
  background-color: #fba1d5;
  color: #d15b9f;
  border-color: #de8bbb;
}
.pink_skin .student_header:before {
  background-color: #feeaef;
}
.pink_skin .student_div > div:not(.chara_base):after {
  /*-下線-*/
  border-bottom: 1px dashed #f7d8ea;
}
.pink_skin .level_icon_div dt:before {
  background-color: #feeaef;
}
.pink_skin .status_div dt {
  background-color: #feeaef;
}
.pink_skin .status_div dd a {
  color: #da66a9;
}
.pink_skin button {
  background-color: #f687c7;
  border-bottom-color: #d377ac;
}
.pink_skin .alert_msg {
  color: #da66a9;
}
.pink_skin .alert_balloon {
  color: #da61a7;
  border-color: #f9b2db;
  background-color: #feffd7;
}
.pink_skin .alert_balloon:before {
  border-top-color: #f9b2db;
}
.pink_skin .alert_balloon:after {
  border-top-color: #feffd7;
}
.pink_skin .chara_base3 {
  /*-キャラ顔-*/
}
.pink_skin .chara_base3:after {
  /*-背景-*/
  background-color: #fabbe0;
  -moz-box-shadow: inset 3px 8px 10px 5px rgba(242, 83, 175, 0.13);
  -webkit-box-shadow: inset 3px 8px 10px 5px rgba(242, 83, 175, 0.13);
  box-shadow: inset 3px 8px 10px 5px rgba(242, 83, 175, 0.13);
}

/*-青スキン-*/
.cyan_skin .student_header {
  background-color: #76dfdf;
  color: #4c9393;
  border-color: #8dbdbd;
}
.cyan_skin .student_header:before {
  background-color: #dbf9f9;
}
.cyan_skin .student_div > div:not(.chara_base):after {
  /*-下線-*/
  border-bottom: 1px dashed #cce5e5;
}
.cyan_skin .level_icon_div dt:before {
  background-color: #dbf9f9;
}
.cyan_skin .status_div dt {
  background-color: #dbf9f9;
}
.cyan_skin .status_div dd a {
  color: #29adad;
}
.cyan_skin button {
  background-color: #6adcdc;
  border-bottom-color: #4cc6c6;
}
.cyan_skin .alert_msg {
  color: #29adad;
}
.cyan_skin .alert_balloon {
  color: #29adad;
  border-color: #9be8e8;
  background-color: #fdffbe;
}
.cyan_skin .alert_balloon:before {
  border-top-color: #9be8e8;
}
.cyan_skin .alert_balloon:after {
  border-top-color: #fdffbe;
}
.cyan_skin .chara_base3 {
  /*-キャラ顔-*/
}
.cyan_skin .chara_base3:after {
  /*-背景-*/
  background-color: #b8f3f3;
  -moz-box-shadow: inset 3px 8px 10px 5px rgba(127, 234, 234, 0.3);
  -webkit-box-shadow: inset 3px 8px 10px 5px rgba(127, 234, 234, 0.3);
  box-shadow: inset 3px 8px 10px 5px rgba(127, 234, 234, 0.3);
}

.student_div {
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #bbb;
  border-top: none;
  width: 100%;
  margin: 5px auto 10px;
  background-color: #fff;
  padding: 1px;
  /*-marginの相殺を避けるため-*/
  padding-left: 5%;
  padding-right: 5%;
  font-size: 100%;
}
.student_div button {
  font-size: 111%;
}
.student_div > div:not(.chara_base) {
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
  text-align: center;
}
.student_div > div:not(.chara_base):last-of-type {
  margin-bottom: 20px;
}
.student_div > div:not(.chara_base):last-of-type:after {
  display: none;
}
.student_div > div:not(.chara_base):after {
  /*-下線-*/
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-bottom: 1px dashed #d4e9a4;
}

/*- 吹き出し -*/
.alert_balloon {
  border-radius: 8px;
  background-color: #fcffa4;
  border: 2px solid #b1ea1f;
  color: #5b7a14;
  padding: 5px 8px;
  position: relative;
  z-index: 5;
  margin: 0 auto 15px;
  display: block;
  text-align: center;
  max-width: 640px;
}
.alert_balloon:before, .alert_balloon:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 9px 0 9px;
  left: calc(50% - 9px);
}
.alert_balloon:before {
  border-color: #b1ea1f transparent transparent transparent;
  top: calc(100% + 2px);
  z-index: -1;
}
.alert_balloon:after {
  border-color: #fcffa4 transparent transparent transparent;
  top: calc(100% - 2px);
}
.alert_balloon .bold {
  color: #698c17;
}
.alert_balloon + .normal_b_div button {
  margin: 0 5px;
}

.align_l {
  position: relative;
}
.align_l .alert_balloon {
  text-align: left;
}
.align_l .alert_balloon p {
  margin-right: 80px;
  margin-left: 35px;
}
.align_l .alert_balloon .fntbold:before {
  content: "！";
  background-color: #93c520;
  padding: 0 4px;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-size: 130%;
  font-weight: bold;
  vertical-align: middle;
  margin-left: -30px;
}
.align_l .normal_b {
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.warning .alert_balloon,
.warning .alert_msg {
  background-color: #ff4d4d;
  color: #000;
  border: 2px solid maroon;
}
.warning .alert_balloon:before,
.warning .alert_msg:before {
  border-color: maroon transparent transparent transparent;
}
.warning .alert_balloon:after,
.warning .alert_msg:after {
  border-color: #ff4d4d transparent transparent transparent;
}
.warning .alert_balloon P:first-of-type,
.warning .alert_msg P:first-of-type {
  border-bottom: 1px solid maroon;
}
.warning .alert_balloon P:first-of-type:before,
.warning .alert_msg P:first-of-type:before {
  content: "!";
  display: inline;
  padding: 0 4px;
  margin: 5px;
  background-color: #ff0;
  font-weight: bold;
  font-size: 130%;
}
.warning .alert_msg {
  border: none;
  padding: 3px;
}
.warning .alert_msg:before, .warning .alert_msg:after {
  display: none;
}

.alert_msg {
  color: #8ab021;
}
.alert_msg .bold {
  color: #799b1d;
}
.alert_msg.col_red {
  color: #ff743e;
}
.alert_msg.col_red .bold {
  color: #ff6225;
}

.status_div dl {
  display: table;
  border-collapse: separate;
  border-spacing: 2px 0;
  color: #625b3f;
  width: 100%;
  margin-bottom: 2px;
}
.status_div dt, .status_div dd {
  display: table-cell;
  vertical-align: middle;
}
.status_div dt {
  background-color: #effad7;
  border-radius: 8px 0 0 8px;
  width: 80px;
}
.status_div dt.bg_colCyan {
  /*-水色-*/
  background-color: #cef7f7;
}
.status_div dt.bg_colCyan + dd button {
  background-color: #6adcdc;
  border-bottom-color: #4cc6c6;
}
.status_div dt.bg_colCyan + dd a {
  color: #58bbbb;
}
.status_div dt.bg_colBrown {
  /*-茶色-*/
  background-color: #f2e2c4;
}
.status_div dt.bg_colRed {
  /*-赤色-*/
  background-color: #fed0d3;
}
.status_div dd {
  background-color: #f1efe9;
  padding: 2px;
  border-radius: 0 8px 8px 0;
}
.status_div dd button {
  min-height: 25px;
}
.status_div dd a:not(.normal_txt) {
  background-color: #fff;
  border-radius: 3px;
  padding: 0 3px;
  color: #87bb17;
  border: 1px solid #ccc;
  border-bottom-color: #bfbfbf;
  cursor: pointer;
}
.status_div .chara_base3 {
  margin: 20px 20.31% 40px;
}
.status_div .chara_base3:before {
  top: -10px;
  right: -10px;
  bottom: -38px;
  left: -10px;
}
.status_div .chara_base3 img {
  width: 80%;
}
.status_div button.icon_body, .status_div button.icon_music {
  bottom: -32px;
}
.status_div button.icon_music {
  left: 0px;
}
.status_div button.icon_body {
  right: 0px;
}

/*-レベルアイコンサイドメニュー用-*/
.level_icon_div .level_icon {
  display: block;
}
.level_icon_div dl {
  border-spacing: 2px 0;
  width: 100%;
  margin: 3px 0;
}
.level_icon_div dt {
  width: auto;
  position: relative;
  z-index: 5;
  font-size: 100%;
  letter-spacing: 0;
}
.level_icon_div dt:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  background-color: #effad7;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: 2px;
  width: auto;
  height: auto;
  border-radius: 10px 0 0 10px;
  border-right: 2px solid #fff;
}

/*ie11用*/
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .level_icon_div dt::before {
    bottom: -4px;
  }
}
.status_div .icon_feather2,
.status_div .icon_ticket2,
.status_div .icon_coin2 {
  padding-right: 22px;
}

.icon_feather2,
.icon_ticket2,
.icon_coin2 {
  text-align: right;
  position: relative;
  word-break: break-all;
}
.icon_feather2:after,
.icon_ticket2:after,
.icon_coin2:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 2px;
  bottom: 1px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.icon_feather2:after {
  background-image: url(../img/common/i_feather_s.png);
}

.icon_ticket2:after {
  background-image: url(../img/common/i_ticket.png);
}

.icon_coin2:after {
  background-image: url(../img/i_coin.png);
}

@media screen and (min-width: 640px) and (max-width: 1126px) {
  /*-画面サイズが $width_1000 以下～ $width_0640以上-*/
  .student_header {
    width: 100%;
  }

  .student_div {
    font-size: 90%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
  .student_div hr {
    width: 90%;
  }
  .student_div .level_icon {
    margin-left: 3px;
    margin-right: 3px;
  }
  .student_div .level_icon dl {
    border-spacing: 0;
    margin: 3px 0;
    padding: 2px 1px 2px 0;
  }
  .student_div .level_icon dt {
    font-size: 98%;
  }
  .student_div .level_icon dt.fntsize_s {
    letter-spacing: -0.1em;
    font-size: 90%;
  }
  .student_div .level_icon dd {
    width: 18px;
    height: 18px;
  }
  .student_div > div:not(.chara_base):after {
    /*-下線-*/
    left: 5%;
    right: 5%;
  }

  /*- 吹き出し -*/
  .alert_balloon {
    padding: 3px 2px;
  }
  .alert_balloon:after, .alert_balloon:before {
    border-width: 11px 6px 0 6px;
    left: calc(50% - 6px);
  }

  .status_div .chara_base3 {
    margin: 15px;
    margin-bottom: 40px;
    /*- ボタンを外に出すスペース -*/
  }
  .status_div dt {
    width: 56px;
    font-size: 98%;
  }

  .icon_feather2,
  .icon_ticket2,
  .icon_coin2 {
    padding-right: 16px;
  }
  .icon_feather2:after,
  .icon_ticket2:after,
  .icon_coin2:after {
    width: 16px;
    height: 16px;
    bottom: 2px;
  }
}
@media screen and (max-width: 640px) {
  /*-画面サイズが640px以下-*/
  .student_header {
    width: 100%;
  }

  .student_div {
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    border-color: #ccc;
  }
  .student_div > div:not(.chara_base) {
    padding: 6px;
  }

  .status_div .chara_base3 {
    width: 130px;
    margin: 10px auto 40px;
  }
  .status_div dd {
    padding-left: 4px;
    padding-right: 4px;
  }
  .status_div dt {
    width: 8em;
  }
  .status_div dt.fntsize_s {
    font-size: inherit;
    letter-spacing: inherit;
  }

  .level_icon_div dl {
    float: left;
    margin: 1px 2px;
    width: calc(50% - 4px);
    min-width: 200px;
  }

  .level_icon {
    overflow: hidden;
    *zoom: 1;
  }
}
/*-バナー広告一式-*/
.web_banner,
.minimap_wrapper {
  width: 100%;
  position: relative;
  margin: 0 auto 8px;
  overflow: hidden;
}
@media screen and (max-width: 500px) {
  .web_banner,
  .minimap_wrapper {
    /*- 500px以下 -*/
    margin: 0 auto 4px;
  }
}

.web_banner a.ad_anime {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.web_banner img {
  width: 100%;
  vertical-align: middle;
}

.web_banner button.left_page, .web_banner button.right_page,
.minimap_div button.left_page,
.minimap_div button.right_page {
  /*-ページめくり-*/
  width: 42px;
  height: 42px;
  position: absolute;
  bottom: 0;
  border: none;
  border-color: transparent;
  background-color: transparent;
  z-index: 100;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.web_banner button.left_page img, .web_banner button.right_page img,
.minimap_div button.left_page img,
.minimap_div button.right_page img {
  vertical-align: top;
}
.web_banner button.left_page,
.minimap_div button.left_page {
  left: 0;
}
.web_banner button.left_page:hover,
.minimap_div button.left_page:hover {
  background-image: url(../img/page_curl_left.png);
}
.web_banner button.right_page,
.minimap_div button.right_page {
  right: 0;
}
.web_banner button.right_page:hover,
.minimap_div button.right_page:hover {
  background-image: url(../img/page_curl.png);
}

.ad_banner_top_wrapper {
  width: 100%;
  overflow: hidden;
}
.ad_banner_top_wrapper .ad_banner_top {
  margin: 10px 0 0 255px;
  width: calc(100% - 510px);
}
@media screen and (max-width: 1126px) {
  .ad_banner_top_wrapper .ad_banner_top {
    /*-$width_1000以下 -*/
    margin-left: 5px;
    width: calc(100% - 260px);
  }
  .ad_banner_top_wrapper .ad_banner_top .ad_banner_top_l {
    display: none;
  }
}
@media screen and (max-width: 877px) {
  .ad_banner_top_wrapper .ad_banner_top {
    /*-$width_0900以下 -*/
    width: calc(100% - 10px);
  }
  .ad_banner_top_wrapper .ad_banner_top .ad_banner_top_r {
    display: none;
  }
}
@media screen and (max-width: 877px) {
  .ad_banner_top_wrapper {
    /*-$width_0900以下 -*/
    display: none;
  }
}

.ad_banner_top_l,
.ad_banner_top_r {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 0;
  max-width: 600px;
}
.ad_banner_top_l a,
.ad_banner_top_r a {
  position: relative;
  height: 88px;
  width: 250px;
  z-index: 100;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}
.ad_banner_top_l a img,
.ad_banner_top_r a img {
  height: 100%;
  position: absolute;
  top: 0;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.ad_banner_top_l {
  right: 100%;
  margin-right: 5px;
  text-align: right;
}

.ad_banner_top_r {
  left: 100%;
  margin-left: 5px;
  text-align: left;
}

.contents_inner .ad_banner_top {
  display: none;
}
@media screen and (max-width: 877px) {
  .contents_inner .ad_banner_top {
    /*-$width_0900以下 -*/
    display: block;
    margin-top: 16px;
  }
}

.ad_banner_top {
  width: calc(100% - 12px);
  margin: 10px 6px 10px;
  background-color: transparent;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 500px) {
  .ad_banner_top {
    margin: 10px 8px 10px;
    width: calc(100% - 16px);
  }
}
.ad_banner_top div:first-child {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}
.ad_banner_top div:first-child .banner_link {
  display: inline-block;
}
.ad_banner_top div:first-child .banner_link img {
  width: 100%;
  height: auto;
  vertical-align: top;
  max-width: 600px;
}
.ad_banner_top div:first-child .banner_link + span {
  /*-画像があるときは消す-*/
  display: none;
}
.ad_banner_top div:first-child span {
  /*-画像がないときにスペースを空ける用-*/
  display: block;
  width: 100%;
  padding-bottom: 14.66667%;
  background-color: #bfb9a8;
}

.top_area_only {
  /*-追加広告-*/
  display: none;
}

.top_area .web_banner,
.top_area .minimap_wrapper {
  width: 100%;
}
.top_area .top_area_only {
  /*-追加広告表示-*/
  display: block;
}
.top_area + .controller {
  margin-top: 10px;
}
.top_area > div {
  position: relative;
  width: 100%;
}

.web_banner_header,
.minimap_header {
  background-color: #608900;
  border-radius: 5px 5px 0 0;
  text-align: left;
  color: #fff;
  padding: 0;
  font-size: 90%;
  height: 28px;
  overflow: hidden;
  line-height: 1.3;
  position: relative;
}
.web_banner_header span,
.minimap_header span {
  display: block;
  margin: 0 4px 0 5px;
  overflow: hidden;
  max-height: 28px;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*-ビデオ広告バナー-*/
.web_banner.video_banner {
  overflow: hidden;
  border-radius: 0 0 5px 5px;
}
.web_banner.video_banner .web_banner_header span,
.web_banner.video_banner .minimap_header span {
  margin-right: 25px;
  /*-ボタンが重ならないようにスペースを空ける-*/
}
.web_banner.video_banner .other_area_iframe {
  resize: none;
  overflow: hidden;
}
.web_banner.video_banner iframe {
  width: 100%;
}
.web_banner.video_banner.floating_window {
  width: auto;
  border-radius: 5px;
  border: 1px solid #608900;
}
.web_banner.video_banner.floating_window .web_banner_header,
.web_banner.video_banner.floating_window .minimap_header {
  border-radius: 0;
}
.web_banner.video_banner.floating_window .other_area_iframe {
  resize: both;
  overflow-x: scroll;
}
.web_banner.video_banner:not(.floating_window) {
  position: static;
}
.web_banner.video_banner:not(.floating_window) .other_area_iframe {
  width: 100% !important;
  height: 142px !important;
}

.col_red .web_banner_header,
.col_red .minimap_header {
  background-color: #f53d40;
}

.col_yellow .web_banner_header,
.col_yellow .minimap_header {
  background-color: #ffeb3b;
  color: #000;
}

/*-地図（ミニマップ）-*/
/*-リストアイテム-*/
.item_list .item_list_div {
  display: block;
}
.item_list dl {
  border-spacing: 2px 0;
  margin: 10px 0;
  display: table;
  width: 100%;
}
.item_list dt {
  position: relative;
  z-index: 5;
  font-size: 100%;
  letter-spacing: 0;
  display: table-cell;
  padding: 10px;
  width: 4em;
  vertical-align: middle;
  background-color: #ddf4aa;
  border-radius: 10px 0 0 10px;
}
.item_list dt:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: 2px;
  width: auto;
  height: auto;
  border-right: 2px solid #fff;
  display: none;
}
.item_list dd {
  position: relative;
  display: table-cell;
  background-color: #f5f3ef;
  border-radius: 0 10px 10px 0;
  padding: 5px;
}

.item_base {
  /*-隙間を無くすため-*/
  font-size: 0;
}
.item_base div {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  border: 1px solid #c5bba5;
  background-color: #fff;
  border-radius: 12%;
  margin: 2px;
  margin-bottom: 30px;
  text-align: center;
  vertical-align: top;
}
.item_base div button {
  margin-top: 3px;
}
.item_base div[class*="i20"]:before, .item_base div[class*="i21"]:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 120;
  width: 30%;
  height: 30%;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  right: 3%;
  top: 3%;
}
.item_base div.other_item:after {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  background-image: url(../img/other_item.png);
  right: -26px;
  bottom: 0;
}
.item_base div img {
  width: 100%;
}
.item_base input {
  display: none;
}
.item_base input:checked + label {
  background-color: rgba(255, 204, 204, 0.5);
}
.item_base input:checked + label:before {
  background-position: 0 100%;
}
.item_base label {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  border-radius: 12%;
}
.item_base label:before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(../img/checkbox.png);
  -moz-background-size: 100% 200%;
  -o-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
  background-position: 0 0;
  background-repeat: no-repeat;
  right: -2px;
  bottom: -2px;
}

.lock_div {
  position: relative;
}
.lock_div:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 100;
  background-image: url(../img/lock.png);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 50%;
  background-color: #EAFF4D;
  border-radius: 50%;
}
.lock_div img {
  opacity: 0.5;
}

.check_div {
  position: relative;
  z-index: auto;
}
.check_div:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 3px solid #ff7357;
  border-radius: 13%;
  background-image: url(../img/check2.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  -moz-background-size: 45% 45%;
  -o-background-size: 45% 45%;
  -webkit-background-size: 45% 45%;
  background-size: 45% 45%;
}

.change_item_area {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.change_item_area > div {
  display: table-cell;
}

/*-三角画像用div-*/
.img_div {
  text-align: center;
  vertical-align: middle;
  width: 100px;
  position: relative;
}
.img_div:before {
  content: "";
  display: block;
  width: 50%;
  height: 0;
  padding-top: 50%;
  background-image: url(../img/direction_try.png);
  background-repeat: no-repeat;
  -moz-background-size: 100% 200%;
  -o-background-size: 100% 200%;
  -webkit-background-size: 100% 200%;
  background-size: 100% 200%;
  margin: auto;
}

.change_item,
.trade_item {
  border-radius: 10px;
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  background-color: #e9e5dd;
}
.change_item > *,
.trade_item > * {
  position: relative;
  z-index: 10;
}
.change_item:before,
.trade_item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  left: 2px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 80px / 100%;
}

/*-角丸ヘッダー-*/
.rnd_header {
  font-size: 120%;
  font-weight: bold;
  background-color: #9dd223;
  color: #fff;
  display: inline-block;
  margin: 5px auto 5px;
  border-radius: 8px;
  padding: 0 5px;
}

/*-リボンヘッダー-*/
.ribon_header {
  position: relative;
  z-index: 10;
  margin: 5px 8px;
  background-color: #7ebcc7;
}
.ribon_header span {
  display: block;
  position: relative;
  z-index: 10;
  font-size: 130%;
  color: #fff;
  font-weight: bold;
  padding: 2px 4px;
  min-height: 28px;
}
.ribon_header:before, .ribon_header:after,
.ribon_header span:before,
.ribon_header span:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.ribon_header:before,
.ribon_header span:before {
  border-width: 26px 14px 0 14px;
  border-color: #7ebcc7 transparent transparent transparent;
  top: 0;
}
.ribon_header:after,
.ribon_header span:after {
  border-width: 0 14px 26px 14px;
  border-color: transparent transparent #7ebcc7 transparent;
  bottom: 0;
}
.ribon_header:before, .ribon_header:after {
  left: -14px;
}
.ribon_header span:before,
.ribon_header span:after {
  right: -14px;
}

.itembox_div {
  border-radius: 10px;
  position: relative;
  margin-bottom: 5px;
  background-color: #fff;
}
.itembox_div:last-of-type {
  margin-bottom: 0;
}
.itembox_div > img {
  /*-アイテム画像-*/
  width: 80px;
  vertical-align: top;
}
.itembox_div > .item_base {
  background-color: #cebf9c;
  border-top: 2px solid #c9b892;
  border-radius: 0 0 10px 10px;
  padding: 5px;
}
.itembox_div > .item_base div {
  margin-left: 1px;
  margin-right: 1px;
}
.itembox_div > .item_base div.other_item {
  margin-right: 28px;
}
.itembox_div > .testbox0 {
  background-color: #cebf9c;
  border-top: 2px solid #c9b892;
  border-radius: 0 0 10px 10px;
  padding: 5px;
}
.itembox_div select, .itembox_div input[type="text"] {
  border-color: #ccc;
}
.itembox_div > .normal_b:not(.side_button) {
  width: 60px;
  margin: 10px 5px;
}

.itembox_div.editbox {
  background-color: #f5f3ef;
}

.editbox > .change_item_area {
  background-color: #cebf9c;
  border-top: 2px solid #c9b892;
  border-radius: 0 0 10px 10px;
  padding: 5px;
}

.count span:first-of-type {
  font-weight: bold;
  font-size: 180%;
  line-height: 0.85em;
  color: #8dbc1f;
  vertical-align: text-bottom;
  margin-left: 5px;
}

.itembox_info {
  display: inline-block;
  width: calc(100% - 160px);
}
.itembox_info input[type="text"] {
  width: 18em;
}

.side_button {
  position: absolute;
  right: 4px;
  top: 0;
}
.side_button + .itembox_info {
  margin-top: 16px;
}

.info_msg2 {
  font-size: 90%;
  color: #808080;
}

.itembox_wrap {
  background-color: #e5e5e5;
  border-radius: 10px;
  padding: 0 5px 10px;
}
.itembox_wrap > .count {
  padding: 5px;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;
  background-color: #fff;
}
.itembox_wrap.no_scroll {
  padding: 0 0 5px;
}
.itembox_wrap.no_scroll .itembox_scroll {
  overflow: visible;
  height: auto;
}

.itembox_scroll {
  height: 300px;
  overflow: auto;
  padding: 0 5px;
  border-radius: 10px;
}

.itembox_subinfo {
  display: inline-block;
  border-radius: 5px;
  margin: 5px;
  position: relative;
}
.itembox_subinfo li {
  margin: 0 5px 5px 0;
  display: inline-block;
  font-size: 90%;
  border-bottom: 1px dashed #ccc;
  width: 32%;
  min-width: 320px;
}
.itembox_subinfo li span {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 35px);
  line-height: 1.3em;
}
.itembox_subinfo li img {
  width: 30px;
  background-color: #fff;
  vertical-align: middle;
}

/*-itembox設定-*/
.editbox .item_base div {
  margin: 2px;
}
.editbox .change_item,
.editbox .trade_item {
  /*-span.countが入るスペース-*/
  padding-bottom: 20px;
  /*-.common_flame selectが入るスペース-*/
  padding-top: 40px;
}
.editbox span.count {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  padding: 0 5px;
  border-radius: 5px 0 10px 0;
}
.editbox .common_flame {
  position: absolute;
  top: 5px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 200px;
  min-width: 160px;
  margin: 0;
  font-size: 100%;
}
.editbox .common_flame .page_next,
.editbox .common_flame .page_previous {
  width: 25px;
  height: 25px;
}
.editbox .common_flame .page_previous:before {
  margin-left: -2px;
  border-width: 8px 13px 8px 0;
}
.editbox .common_flame .page_next:before {
  margin-left: 2px;
  border-width: 8px 0 8px 13px;
}
.editbox .common_flame div {
  vertical-align: middle;
}

.button_div {
  width: 100px;
  position: relative;
  text-align: center;
}
.button_div > div {
  width: 100%;
}

.change_boxR,
.change_boxL,
.trashbox,
.trashbox button {
  position: relative;
}
.change_boxR:after, .change_boxR:before,
.change_boxL:after,
.change_boxL:before,
.trashbox:after,
.trashbox:before,
.trashbox button:after,
.trashbox button:before {
  content: "";
  position: absolute;
  display: inline-block;
  background-image: url(../img/item_navi.png);
  background-repeat: no-repeat;
  -moz-background-size: 100% 500%;
  -o-background-size: 100% 500%;
  -webkit-background-size: 100% 500%;
  background-size: 100% 500%;
}

.change_boxR:after, .change_boxR:before,
.change_boxL:after,
.change_boxL:before,
.trashbox:after,
.trashbox:before {
  width: 20px;
  height: 20px;
}

.change_boxR:after, .change_boxR:before,
.change_boxL:after,
.change_boxL:before {
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.change_boxR:after {
  /*-三角-*/
  background-position: 0 25%;
  right: 0;
}
.change_boxR:before {
  /*-三角-*/
  display: none;
}
.change_boxR button:before {
  content: "右へ";
}

.change_boxL:after {
  /*-三角-*/
  display: none;
}
.change_boxL:before {
  /*-三角-*/
  left: 0;
  background-position: 0 75%;
}
.change_boxL button:before {
  content: "左へ";
}

.trashbox {
  position: absolute;
  bottom: 2%;
}
.trashbox button {
  background-color: transparent;
  border: none;
  color: #fff;
  font-weight: bold;
  padding-top: 30px;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
}
.trashbox button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.trashbox button:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.trashbox button.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.trashbox button.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.trashbox button.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.trashbox button:after, .trashbox button:before {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.trashbox button:before {
  /*-●-*/
  background-image: none;
  width: 30px;
  height: 30px;
  background-color: #ff7357;
  border-radius: 50%;
  top: 0px;
}
.trashbox button:after {
  /*-×-*/
  width: 20px;
  height: 20px;
  top: 5px;
  background-position: 0 100%;
}
.trashbox:after, .trashbox:before {
  /*-三角-*/
  top: 5px;
}
.trashbox:after {
  /*-三角-*/
  right: 0;
  background-position: 0 75%;
}
.trashbox:before {
  /*-三角-*/
  left: 0;
  background-position: 0 25%;
}

@media screen and (max-width: 1126px) {
  /*-画面サイズが1000px以下-*/
  .change_item_area {
    display: block;
    width: 100%;
  }
  .change_item_area > div {
    display: block;
  }

  .img_div {
    margin: 0 auto;
  }
  .img_div:before {
    /*-三角縦-*/
    background-position: 0 100%;
  }

  .button_div {
    width: 100%;
    text-align: left;
  }
  .button_div > div {
    width: auto;
    height: 70px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 5px;
  }
  .button_div > div:first-of-type {
    margin-left: 18px;
  }

  .change_boxR:after, .change_boxR:before,
  .change_boxL:after,
  .change_boxL:before,
  .trashbox:after,
  .trashbox:before {
    /*-三角-*/
    top: auto;
    bottom: auto;
    left: 50%;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .change_boxR:before,
  .change_boxL:before,
  .trashbox:before {
    /*-三角-*/
    background-position: 0 0;
  }
  .change_boxR:after,
  .change_boxL:after,
  .trashbox:after {
    /*-三角-*/
    background-position: 0 50%;
  }
  .change_boxR button,
  .change_boxL button,
  .trashbox button {
    top: 16px;
    position: relative;
  }

  .change_boxR:before,
  .change_boxL:before {
    /*-三角-*/
    top: 0;
  }
  .change_boxR:after,
  .change_boxL:after {
    /*-三角-*/
    bottom: 0;
  }

  .change_boxR button:before {
    content: "下へ";
  }

  .change_boxL button:before {
    content: "上へ";
  }

  .trashbox {
    position: absolute;
    right: 0;
  }
  .trashbox:before {
    /*-三角-*/
    bottom: 0;
  }
  .trashbox:after {
    /*-三角-*/
    top: 0;
  }
  .trashbox button {
    padding-top: 5px;
    top: 20px;
    background-color: #bda97a;
    border-radius: 5px;
  }
  .trashbox button:after, .trashbox button:before {
    /*-マーク-*/
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    left: auto;
    display: inline-block;
    vertical-align: middle;
  }
  .trashbox button:before {
    position: relative;
    width: 24px;
    height: 24px;
    left: -3px;
    top: -2px;
  }
  .trashbox button:after {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 7px;
    top: 7px;
  }
}
/*-日記構造-*/
.diary_wrapper {
  padding: 10px;
  margin-left: -8px;
  margin-right: -8px;
  background-color: #e8e5dd;
  border-radius: 8px;
}
.diary_wrapper input,
.diary_wrapper textarea,
.diary_wrapper select {
  border-color: #ccc;
}

.diary_inner {
  width: 100%;
  display: table;
  /*-重要 文字省略使ってるときにこれがないとoveflow:hiddenが効かない-*/
  table-layout: fixed;
}

.diary_side {
  display: table-cell;
  width: 220px;
}

.diary_sideTop {
  /*-日記カレンダー-*/
  width: 220px;
}

.diary_sideBottom {
  width: 220px;
}

.diary_main {
  display: table-cell;
  vertical-align: top;
}

.calendar_wraper {
  position: relative;
  width: 210px;
  height: 210px;
  overflow: hidden;
  border-radius: 5%;
  border: 1px solid #dbd7c9;
}

/*-カレンダー-*/
.calendar {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}
.calendar tbody td {
  background-color: #fff;
  position: relative;
  z-index: 30;
}
.calendar td {
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.calendar td a {
  /*-日記を書いた日-*/
  display: block;
  margin: 0 auto;
  z-index: 30;
  font-weight: bold;
  color: #fff;
  /*-ボタンをhoverや押したときの効果（基本）-*/
  cursor: pointer;
}
.calendar td a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.calendar td a:active {
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.calendar td a.gray_b {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.calendar td a.gray_b:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.calendar td a.gray_b:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.calendar td a:before {
  /*-リンク円-*/
  content: "";
  position: absolute;
  display: block;
  top: 2%;
  right: 2%;
  bottom: 2%;
  left: 2%;
  background-color: #a9dd31;
  border-radius: 50%;
  z-index: -1;
}
.calendar td.c_sun {
  /*-日曜日-*/
  color: #ff401a;
}
.calendar td.c_sat {
  /*-日曜日-*/
  color: #36b58a;
}
.calendar td.other_month {
  /*-前月、次月-*/
  font-size: 80%;
  position: relative;
}
.calendar td.other_month:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(238, 238, 238, 0.65);
}
.calendar td.other_month a {
  /*-前月、次月の日記がある日-*/
  position: relative;
}
.calendar td.other_month a:before {
  /*-リンク円-*/
  background-color: #cee892;
}

.year_spn {
  /*-年表示-*/
  position: relative;
  color: #729919;
}

.month_spn {
  /*-月表示-*/
  background-color: #fff;
  border-radius: 50%;
  width: 2em;
  text-align: center;
  padding: 2% 0;
  margin: 5px;
  display: inline-block;
  font-size: 140%;
  font-weight: bold;
  color: #7ca61b;
}

.c_month {
  /*-年月-*/
  background-color: #a9dd31;
}

.prev_icon,
.next_icon {
  /*-次、前 アイコンのみボタン-*/
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: none;
  /*-基本ボタンアクション(透明有効)-*/
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
}
.prev_icon:hover,
.next_icon:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.prev_icon:active,
.next_icon:active {
  /*-クリックで2px下がる処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}

.prev_icon {
  /*-前ボタン-*/
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 110% -455px;
  background-repeat: no-repeat;
}

.next_icon {
  /*-次ボタン-*/
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 110% -415px;
  background-repeat: no-repeat;
}

.c_today {
  /*-今日-*/
}
.c_today:before {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #ff7357;
  z-index: 50;
  bottom: 0;
}

/*-日記タイトルリスト-*/
.scrollup,
.scrolldown,
#form_title_list_submit,
#form_bbs_reload {
  margin: 0 2px 0 2px;
  padding: 2px 0;
  border: none;
  background-color: #8dc048;
  border-radius: 5px;
  border-bottom: 2px solid #73a72e;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  height: 28px;
}
.scrollup:hover,
.scrolldown:hover,
#form_title_list_submit:hover,
#form_bbs_reload:hover {
  background-color: #f9f171;
  color: #996d00;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #f2b00d;
}
.scrollup.gray_b, .scrollup.b_gray,
.scrolldown.gray_b,
.scrolldown.b_gray,
#form_title_list_submit.gray_b,
#form_title_list_submit.b_gray,
#form_bbs_reload.gray_b,
#form_bbs_reload.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.scrollup.gray_b:hover, .scrollup.b_gray:hover,
.scrolldown.gray_b:hover,
.scrolldown.b_gray:hover,
#form_title_list_submit.gray_b:hover,
#form_title_list_submit.b_gray:hover,
#form_bbs_reload.gray_b:hover,
#form_bbs_reload.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.scrollup.gray_b:active, .scrollup.b_gray:active,
.scrolldown.gray_b:active,
.scrolldown.b_gray:active,
#form_title_list_submit.gray_b:active,
#form_title_list_submit.b_gray:active,
#form_bbs_reload.gray_b:active,
#form_bbs_reload.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.scrollup {
  width: 56px;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 250% -176px;
  background-repeat: no-repeat;
}

.scrolldown {
  width: 56px;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 250% -216px;
  background-repeat: no-repeat;
}

.diary_list_base {
  margin: 8px 0;
  position: relative;
  width: 210px;
  padding: 3px 0;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  *zoom: 1;
}
.diary_list_base .base_headline {
  /*-見出し-*/
  display: inline-block;
  margin: 0;
  margin-top: 5px;
  margin-left: 10px;
  font-size: 120%;
  position: relative;
  font-weight: normal;
}
.diary_list_base .scrollup,
.diary_list_base .scrolldown {
  margin: 0 4px 0 4px;
  padding: 2px 0;
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  height: 28px;
  float: right;
}
.diary_list_base .scrollup:hover,
.diary_list_base .scrolldown:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.diary_list_base .scrollup:active,
.diary_list_base .scrolldown:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.diary_list_base .scrollup.gray_b, .diary_list_base .scrollup.b_gray,
.diary_list_base .scrolldown.gray_b,
.diary_list_base .scrolldown.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.diary_list_base .scrollup.gray_b:hover, .diary_list_base .scrollup.b_gray:hover,
.diary_list_base .scrolldown.gray_b:hover,
.diary_list_base .scrolldown.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.diary_list_base .scrollup.gray_b:active, .diary_list_base .scrollup.b_gray:active,
.diary_list_base .scrolldown.gray_b:active,
.diary_list_base .scrolldown.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.diary_list_div {
  margin: 5px 0;
}

.diary_title_ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background-color: #d8d2c5;
  padding: 0 3px;
  resize: vertical;
  min-height: 100px;
  height: 200px;
}
.diary_title_ul li {
  position: relative;
  margin: 3px 0;
}
.diary_title_ul li:last-child {
  border-bottom: none;
}
.diary_title_ul a {
  background-color: white;
  padding: 5px 20px 10px 2px;
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  /*-はみ出た文字を省略-*/
  border: 1px solid #d9d9d9;
  text-indent: 5px;
  color: #777;
  position: relative;
  border-radius: 5px / 50%;
  /*-基本ボタンアクション(透明有効)-*/
}
.diary_title_ul a:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.diary_title_ul a:active {
  /*-クリックで2px下がる処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.diary_title_ul a:after {
  /*-三角-*/
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #8eca3f;
  margin-right: -15px;
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.diary_title_ul a span {
  /*-日時-*/
  position: absolute;
  right: 0px;
  bottom: -2px;
  font-size: 80%;
  padding: 0 5px;
  color: #ccc;
  letter-spacing: -0.1em;
}

/*-日記本文-*/
.diary_body {
  background-color: #fff;
  border-radius: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 5px;
}

.diary_headline {
  font-size: 140%;
  padding: 5px;
  margin: 5px;
  color: #666;
  border-bottom: 1px solid #a9dd31;
  position: relative;
}
.diary_headline:after {
  /*-日付スペース-*/
  content: "";
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-right: 160px;
}
.diary_headline span {
  text-align: right;
  margin: 0;
  color: #a9a9a9;
  position: relative;
  font-size: 80%;
  position: absolute;
  right: 0.5em;
  bottom: 0;
  letter-spacing: -0.1em;
}

.photobase {
  /*-写真フレーム-*/
  width: 100%;
  text-align: center;
  margin: 10px auto 5px;
}
.photobase img.photo_y,
.photobase img.photo_x {
  margin: 0 auto;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmVmNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NlZWI4OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfef6), color-stop(100%, #ceeb89));
  background-image: -moz-linear-gradient(top, #fbfef6, #ceeb89);
  background-image: -webkit-linear-gradient(top, #fbfef6, #ceeb89);
  background-image: linear-gradient(to bottom, #fbfef6, #ceeb89);
  display: inline-block;
  height: auto;
}
.photobase img.photo_y {
  /*-縦長画像用-*/
  height: 240px;
}
.photobase img.photo_x {
  /*-横長画像用-*/
  max-width: 400px;
  width: 90%;
}

.balloon_body {
  /*-吹き出し内の写真フレーム-*/
}
.balloon_body .photobase img.photo_y {
  height: 80px;
}

.r_diary {
  padding: 10px 8px 10%;
  letter-spacing: 1px;
  line-height: 180%;
  font-size: 120%;
}

/*-日記コメント-*/
.diary_comment {
  margin: 10px auto;
  text-align: center;
  max-width: 640px;
}
.diary_comment > .normal_b {
  width: 100px;
  height: 40px;
  text-align: center;
  margin: 10px;
  font-size: 120%;
  letter-spacing: 0.5em;
  padding-left: 1em;
}
.diary_comment textarea {
  height: 80px;
  font-size: 110%;
  margin: 10px auto 5px;
  max-width: 480px;
}

.close_bx {
  /*-削除ボタン-*/
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  padding: 0px 0;
  background-color: #ccc;
  border-radius: 50%;
  border: none;
  border-color: transparent;
  /*-基本ボタンアクション(透明有効)-*/
}
.close_bx:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.close_bx:active {
  /*-クリックで2px下がる処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.close_bx.master {
  background-color: #f00;
}

.diary_comment_area {
  text-align: left;
  background-color: #d8d2c5;
  border-radius: 8px;
}
.diary_comment_area div {
  position: relative;
  border-bottom: 1px solid #c3bba6;
  margin: 0 auto;
  padding: 3px 5px 0;
  font-size: 88%;
  width: calc(100% - 10px);
}
.diary_comment_area div:last-of-type {
  border-bottom-color: transparent;
}
.diary_comment_area div:after {
  /*-投稿日時のスペースを作るブロック-*/
  content: "";
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-right: 100px;
}
.diary_comment_area div .close_bx {
  /*-削除ボタン-*/
  margin: 0 2px 0 2px;
  position: absolute;
  right: 3px;
  top: 1px;
  background-color: #bdb49d;
}
.diary_comment_area div span.comt_user {
  /*-名前-*/
  position: absolute;
  left: 45px;
  color: #666;
}
.diary_comment_area div button + p {
  /*-コメント-*/
  background-color: #fff;
  border-radius: 6px;
  display: inline-block;
  padding: 5px;
  margin: 0;
  margin-bottom: 5px;
  margin-left: 35px;
  margin-top: 18px;
  max-width: 240px;
}
.diary_comment_area div button + p:before {
  /*-吹き出し先-*/
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 7px 0;
  border-color: transparent #ffffff transparent transparent;
  left: 28px;
  top: 28px;
}
.diary_comment_area div img {
  /*-アバター-*/
  width: 30px;
  height: 30px;
  position: absolute;
}
.diary_comment_area div img + p {
  /*-コメントが無い時-*/
  display: inline-block;
  width: auto;
  color: #766a49;
  height: 10px;
  margin-left: 40px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.diary_comment_area div img + p:before {
  display: none;
}
.diary_comment_area div span.comt_date {
  /*-投稿日時-*/
  color: #96875c;
  position: absolute;
  right: 8px;
  bottom: 0px;
  letter-spacing: -0.05em;
}

/*-日記編集-*/
.diary_edit .diary_body {
  background-color: #f2f1ec;
  border: 1px dashed #cfc9b8;
}
.diary_edit .base_headline {
  color: #94be1f;
}

.diary_body .photobase.a00 {
  /*-写真フレーム-*/
  width: 290px;
  text-align: center;
  margin: 10px auto 5px;
}
.diary_body .photobase.a00 img {
  max-width: 180px;
  max-height: 180px;
  height: auto;
  margin: 0 auto;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmJmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhlY2EzZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8fbf2), color-stop(100%, #8eca3f));
  background-image: -moz-linear-gradient(top, #f8fbf2, #8eca3f);
  background-image: -webkit-linear-gradient(top, #f8fbf2, #8eca3f);
  background-image: linear-gradient(to bottom, #f8fbf2, #8eca3f);
  display: inline-block;
}
.diary_body .base_headline {
  margin: 5px 10px;
  font-size: 160%;
}
.diary_body .base_headline + input,
.diary_body .base_headline + textarea,
.diary_body .base_headline + select {
  margin-top: 0;
}
.diary_body input,
.diary_body textarea,
.diary_body select {
  margin: 10px;
  width: calc(100% - 20px);
  /*-margin分削る-*/
}
.diary_body input + textarea {
  margin-top: 0;
}
.diary_body textarea {
  height: 10em;
  resize: vertical;
}
.diary_body > .normal_b {
  /*-実行ボタン-*/
  width: 100px;
  height: 40px;
  text-align: center;
  margin: 10px;
  margin-left: auto;
  /*-右合わせのためにblock化-*/
  display: block;
}
.diary_body .edit_entry_result {
  color: #f48f00;
  background-color: #fff;
  border-color: #ffca7f;
  border-style: solid;
  font-size: 120%;
  padding: 5px;
  border-width: 1px 0 1px 0;
  text-align: center;
  clear: both;
}

/*-コメント受付チェックボックス+ (共用)-*/
input[type=checkbox].edit_entry_cmntmode,
input[type=checkbox].checkbox_input {
  margin: 0 10px 0 0;
  display: none;
}

input[type=checkbox].edit_entry_cmntmode:checked + label,
input[type=checkbox].checkbox_input:checked + label {
  background-color: #eefad0;
  color: #6f990f;
}
input[type=checkbox].edit_entry_cmntmode:checked + label span,
input[type=checkbox].checkbox_input:checked + label span {
  /*-押された状態-*/
}
input[type=checkbox].edit_entry_cmntmode:checked + label span:before,
input[type=checkbox].checkbox_input:checked + label span:before {
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -140px;
  background-repeat: no-repeat;
  background-color: #a9dd31;
}

.checkbox_label {
  margin: 5px 10px;
  border-radius: 6px;
  padding: 10px;
  display: inline-block;
  background-color: #e5e5e5;
  color: #8c8c8c;
  min-width: 120px;
  font-size: 120%;
}
.checkbox_label span {
  position: relative;
  text-indent: 30px;
  display: inline-block;
}
.checkbox_label span:before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-color: #ccc;
  position: absolute;
  border-radius: 3px;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*-コメント受付ラジオボックス+ (共用)2-*/
input[type=radio].edit_entry_cmntmode,
input[type=radio].radiobox_input {
  margin: 0 10px 0 0;
  display: none;
}

input[type=radio].edit_entry_cmntmode:checked + label,
input[type=radio].radiobox_input:checked + label {
  background-color: #eefad0;
  color: #6f990f;
}
input[type=radio].edit_entry_cmntmode:checked + label span,
input[type=radio].radiobox_input:checked + label span {
  /*-押された状態-*/
}
input[type=radio].edit_entry_cmntmode:checked + label span:before,
input[type=radio].radiobox_input:checked + label span:before {
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -140px;
  background-repeat: no-repeat;
  background-color: #a9dd31;
}

.radiobox_label {
  margin: 5px 10px;
  border-radius: 6px;
  padding: 10px;
  display: inline-block;
  background-color: #e5e5e5;
  color: #8c8c8c;
  min-width: 120px;
  font-size: 120%;
}
.radiobox_label span {
  position: relative;
  text-indent: 30px;
  display: inline-block;
}
.radiobox_label span:before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-color: #ccc;
  position: absolute;
  border-radius: 3px;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.new_diary {
  padding: 20px 0;
}
.new_diary .normal_b {
  margin: 10px;
  padding: 10px;
  padding-right: 30px;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 90% -15px;
  background-repeat: no-repeat;
}

/*-月移動-*/
.r_base_date {
  background-color: #a3db24;
  overflow: hidden;
  *zoom: 1;
  width: 210px;
  padding: 0 10px;
  position: relative;
}
.r_base_date p {
  text-align: center;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size: 120%;
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.r_base_date .prv_icon {
  float: left;
}
.r_base_date .next_icon {
  float: right;
}

.diary_edit {
  /*-日記編集用リスト-*/
}
.diary_edit .diary_title_ul li a {
  text-indent: 0;
}
.diary_edit .diary_title_ul li a:before {
  /*-鉛筆アイコン-*/
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/common/pen_icon.png);
  background-repeat: no-repeat;
  background-position: left top;
  -moz-background-size: 40px 20px;
  -o-background-size: 40px 20px;
  -webkit-background-size: 40px 20px;
  background-size: 40px 20px;
  display: inline-block;
  margin: -4px 5px -6px 5px;
  vertical-align: middle;
  margin: 0 3px 0 4px;
}

@media screen and (max-width: 1100px) {
  /*-1100px以下-*/
  .diary_inner {
    display: block;
  }

  .diary_side {
    display: table;
    /*-重要 文字省略使ってるときにこれがないとoveflow:hiddenが効かない-*/
    table-layout: fixed;
    width: 100%;
    padding-bottom: 5px;
    max-width: 640px;
    margin: auto;
  }

  .diary_sideTop {
    /*-日記カレンダー-*/
    display: table-cell;
    vertical-align: top;
    position: relative;
  }

  .diary_sideBottom {
    display: table-cell;
    vertical-align: top;
    position: relative;
    width: 100%;
  }

  .diary_main {
    display: block;
  }

  .diary_list_base {
    width: 100%;
    margin: 0;
  }

  .diary_title_ul {
    height: 140px;
  }
}
@media screen and (max-width: 640px) {
  /*-640px以下-*/
  .diary_wrapper {
    margin-left: -2px;
    margin-right: -2px;
    padding: 5px 4px;
    border-radius: 4px;
  }
  .diary_wrapper > h3 {
    left: -4px;
    top: -5px;
  }
}
@media screen and (max-width: 420px) {
  /*-420px以下-*/
  .diary_side {
    display: block;
  }

  .diary_sideTop {
    /*-日記カレンダー-*/
    display: block;
    width: 100%;
  }

  .calendar_wraper {
    width: 240px;
    height: 240px;
    margin: 8px auto;
    font-size: 110%;
  }

  .diary_sideBottom {
    display: block;
    width: 100%;
  }
}
/*-個人情報-*/
.chara_base3.user_chara {
  width: 100px;
  text-align: center;
}
.chara_base3.user_chara:before {
  top: xy00;
  right: xy00;
  bottom: xy00;
  left: xy00;
}
.chara_base3.user_chara img {
  width: 60%;
}

.user_data_wrapper {
  position: relative;
}
.user_data_wrapper .tab_mini.user_data_top {
  margin-left: 15px;
  margin-top: 10px;
  width: auto;
}
.user_data_wrapper .tab_mini.user_data_top li {
  width: 90px;
  height: auto;
}
.user_data_wrapper .tab_mini.user_data_top .select_b a,
.user_data_wrapper .tab_mini.user_data_top .select_b a:hover,
.user_data_wrapper .tab_mini.user_data_top .select_b a:active {
  background-color: #efe8d7;
}
.user_data_wrapper .tab_mini.user_data_top a {
  height: 1.7em;
}
.user_data_wrapper .user_data {
  margin-top: 0;
}
.user_data_wrapper .close_bx {
  background-color: #bdb49d;
  position: absolute;
  right: 3px;
  top: 3px;
}

.gray_skin {
  /*-灰色-*/
}
.gray_skin .user_data {
  background-color: #e5e5e5;
  border-color: #dddddd;
}
.gray_skin .user_header {
  background-color: #d9d9d9;
  color: #666;
}
.gray_skin .user_header img {
  background-color: #999;
}
.gray_skin .user_header span:last-of-type:before {
  border-top-color: #b3b3b3;
}
.gray_skin .friend_memo {
  color: #808080;
}
.gray_skin .user_bottom {
  background-color: #bfbfbf;
}
.gray_skin .mini_b2 {
  border-color: #bfbfbf;
  color: #808080;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, #ffffff), color-stop(92%, #d9d9d9));
  background-image: -moz-linear-gradient(top, #ffffff 30%, #d9d9d9 92%);
  background-image: -webkit-linear-gradient(top, #ffffff 30%, #d9d9d9 92%);
  background-image: linear-gradient(to bottom, #ffffff 30%, #d9d9d9 92%);
}
.gray_skin .attend.gray_b {
  border-color: #d9d9d9;
  color: #999;
  background-color: #d9d9d9;
}
.gray_skin.user_data_wrapper .user_header .class {
  border-right-color: #b3b3b3;
}
.gray_skin.user_data_wrapper .user_data_top .select_b a,
.gray_skin.user_data_wrapper .user_data_top .select_b a:hover,
.gray_skin.user_data_wrapper .user_data_top .select_b a:active {
  background-color: #dddddd;
  color: #808080;
}
.gray_skin .friend_prof .tab_mini li.select_b a,
.gray_skin .friend_prof .tab_mini li.select_b a:hover,
.gray_skin .friend_prof .tab_mini li.select_b a:active {
  background-color: #ccc;
  color: #666;
}
.gray_skin .friend_prof textarea[readonly] {
  color: #808080;
}
.gray_skin .friend_prof textarea[readonly] + span {
  color: #808080;
}
.gray_skin .friend_prof .group_base {
  background-color: #d9d9d9;
}
.gray_skin .friend_prof .group_base > span {
  color: #808080;
}
.gray_skin .chara_base3:before {
  /*-枠-*/
  border-color: #d9d9d9;
  background-color: #e6e6e6;
}
.gray_skin .chara_base3:after {
  /*-背景-*/
  background-color: #999;
  -moz-box-shadow: inset 3px 8px 10px 5px rgba(102, 102, 102, 0.3);
  -webkit-box-shadow: inset 3px 8px 10px 5px rgba(102, 102, 102, 0.3);
  box-shadow: inset 3px 8px 10px 5px rgba(102, 102, 102, 0.3);
  opacity: 0.5;
}
.gray_skin .chara_base3 img {
  z-index: 0;
}

.user_data {
  background-color: #eeece6;
  border: 2px solid #efe8d7;
  border-radius: 10px;
  font-size: 100%;
  position: relative;
  margin: 5px;
  overflow: hidden;
  *zoom: 1;
}
.user_data .level_icon dl {
  background-color: #fff;
}
.user_data .level_icon dl:before {
  background-color: #F1EFE9;
}
.user_data .chara_base3 {
  margin: 14px 14px 14px;
  width: 160px;
}
.user_data .sub_header {
  color: #766c50;
}
.user_data input[type="text"] {
  padding: 6px;
  width: calc(100% - 50px);
  max-width: 300px;
  vertical-align: middle;
}
.user_data .normal_b {
  vertical-align: baseline;
}
.user_data .normal_b.charge_iconb {
  vertical-align: top;
  float: right;
  margin: 0 10px 5px 0;
}
.user_data .friend_memo {
  clear: both;
}
.user_data .close_bx {
  background-color: #b9af97;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #eeece6;
  box-sizing: content-box;
}
.user_data .close_bx:hover, .user_data .close_bx:active {
  opacity: 1;
}
.user_data .close_bx:hover:before, .user_data .close_bx:active:before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-color: #eeece6;
  border: 2px solid #eeece6;
  border-radius: 50%;
  opacity: 0.5;
}
.user_data .close_bx:active:before {
  background-color: #fff;
  opacity: 0.8;
}
.user_data textarea {
  resize: vertical;
}

.user_header {
  background-color: #e7fabc;
  border-radius: 8px;
  padding: 3px;
  margin: 8px 8px 4px 0;
  color: #5b7a14;
}
.user_header span {
  display: inline-block;
  margin: 2px;
  padding: 2px 8px;
  vertical-align: sub;
  position: relative;
}
.user_header span:last-of-type {
  display: block;
}
.user_header span:last-of-type:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  margin-top: -3px;
  left: 0;
  border-top: 1px dashed #87c200;
}
.user_header img {
  width: 20px;
  height: auto;
  vertical-align: text-top;
  background-color: #84a635;
  border-radius: 50%;
}

/*-青スキン個人-*/
.cyan_skin .user_header {
  background-color: #a3efef;
  color: #3e7979;
}
.cyan_skin .user_header span:last-of-type:before {
  border-top-color: #6ac2c2;
}
.cyan_skin .user_header img {
  background-color: #64afaf;
}

/*-ピンクスキン個人-*/
.pink_skin .user_header {
  background-color: #fcbae0;
  color: #983870;
}
.pink_skin .user_header span:last-of-type:before {
  border-top-color: #e97bbb;
}
.pink_skin .user_header img {
  background-color: #c472a1;
}

.user_l {
  width: 190px;
  float: left;
}

@media screen and (max-width: 480px) {
  #cf_cview_char .charbase {
    /*-$width_0480以下 -*/
    -moz-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
}
@media screen and (max-width: 450px) {
  #cf_cview_char .charbase {
    /*-$width_0450以下 -*/
    -moz-transform: scale(0.85, 0.85);
    -ms-transform: scale(0.85, 0.85);
    -webkit-transform: scale(0.85, 0.85);
    transform: scale(0.85, 0.85);
  }
}
@media screen and (max-width: 420px) {
  #cf_cview_char .charbase {
    /*-$width_0420以下 -*/
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
}
@media screen and (max-width: 380px) {
  #cf_cview_char .charbase {
    /*-$width_0380以下 -*/
    -moz-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -webkit-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
  }
}

.user_r {
  float: right;
  width: calc(100% - 190px);
  min-height: 235px;
}

.user_bottom {
  border-radius: 8px;
  margin: 4px 6px 4px 0;
  padding: 5px 0;
  background-color: #beb9ab;
  display: table;
  width: calc(100% - 11px);
  float: right;
  max-width: 570px;
}
.user_bottom > div {
  display: table-cell;
  text-align: center;
  position: relative;
  vertical-align: bottom;
}
.user_bottom > div:first-of-type {
  min-width: 130px;
}
.user_bottom > div:last-of-type {
  border-left: 1px solid #d9d9d9;
  min-width: 230px;
}
.user_bottom > div p {
  color: #fff;
  float: none;
  padding: 0;
  display: inline-block;
  font-size: 90%;
}
.user_bottom > div button {
  font-size: 90%;
}
@media screen and (max-width: 480px) {
  .user_bottom {
    /*-480px以下-*/
    display: block;
    padding: 2px 5px;
  }
  .user_bottom > div {
    display: block;
  }
  .user_bottom > div:first-of-type {
    min-width: inherit;
    padding-bottom: 4px;
  }
  .user_bottom > div:last-of-type {
    border-top: 1px solid #d9d9d9;
    border-left: none;
    min-width: inherit;
    padding-top: 4px;
  }
  .user_bottom > div button {
    width: 100%;
    max-width: 140px;
  }
  .user_bottom > div p {
    display: block;
  }
}

.group_base {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 4px;
  margin: 4px 6px 4px 0;
  overflow: hidden;
  *zoom: 1;
}
.group_base.bg_none {
  background-color: transparent;
}
.group_base textarea {
  margin-top: 5px;
}
.group_base > span {
  /*-直下のみ-*/
  font-size: 90%;
  color: #8c8c8c;
}
.group_base .note {
  float: left;
  font-size: 90%;
  color: #8c8c8c;
  padding: 4px 0;
}
.group_base button {
  float: right;
  min-width: 80px;
  font-size: 100%;
  margin: 3px 0;
}
.group_base button.long_b {
  min-width: 130px;
}

.user_data.full {
  width: calc(100% - 10px);
  overflow: hidden;
  *zoom: 1;
}
.user_data.full .user_l {
  width: calc(50% - 2px);
  padding: 5px;
}
.user_data.full .user_r {
  width: calc(50% - 2px);
}

.user_bottom_full {
  border-radius: 0 0 8px 8px;
  clear: both;
  padding: 8px;
  background-color: #ded9ce;
  display: block;
  font-size: 90%;
  text-align: center;
  position: relative;
}
.user_bottom_full > div {
  display: inline-block;
  vertical-align: top;
}
.user_bottom_full .flame_l {
  text-align: left;
  margin-right: 10px;
  padding-top: 20px;
}
.user_bottom_full .signboard_r {
  background-color: #a7a295;
  margin-bottom: 6px;
}
.user_bottom_full .signboard_r:after {
  border-left-color: #a7a295;
}
.user_bottom_full .sub_header {
  font-size: 140%;
  position: absolute;
  left: 5px;
  top: 5px;
}
.user_bottom_full img {
  width: 96px;
  background-color: #fff;
  border-radius: 10px;
  vertical-align: top;
}
.user_bottom_full a {
  border-radius: 12px;
  border: 1px dashed #bbb29a;
  padding: 4px;
  margin-bottom: 2px;
  display: inline-block;
}
.user_bottom_full a:hover {
  border-color: #9c8f6c;
  background-color: #bbb29a;
}
.user_bottom_full a:hover img {
  opacity: 0.8;
}

@media screen and (max-width: 450px) {
  /*-$width_0450以下 -*/
  .user_bottom_full .signboard_r {
    padding: 2px 6px;
    margin-right: 0;
    margin-bottom: 10px;
    height: auto;
  }
  .user_bottom_full .flame_r {
    display: block;
  }
  .user_bottom_full .flame_l {
    margin-right: 0;
  }
  .user_bottom_full .signboard_r:after {
    border-width: 6px 8px 0 8px;
    border-color: #a7a295 transparent transparent transparent;
    left: calc(50% - 4px);
    top: 100%;
  }
}
.favosub {
  background-color: #cdeb8d;
  border-radius: 8px;
  margin-top: 3px;
  padding: 3px;
  display: inline-block;
  vertical-align: top;
}
.favosub p {
  display: inline-block;
  margin: 2px;
  padding: 2px 8px;
}
.favosub p:last-of-type {
  background-color: #fff;
  border-radius: 10px;
}

.pink_skin .favosub {
  background-color: #fcc3e4;
}

.cyan_skin .favosub {
  background-color: #b9f3f3;
}

.icon_group {
  margin: 3px 0;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
}

.heart_icon,
.arrow_icon {
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 8px;
  margin: 2px;
  padding: 2px 8px;
}
.heart_icon img,
.arrow_icon img {
  width: 18px;
}

/* エンジェルボタン */
.angel_div span {
  color: #ff7357;
  display: inline-block;
}

.angel_b {
  margin: 0px;
  padding: 0px;
  width: 36px;
  height: 36px;
  border: none;
  border: 2px solid #a9dd31;
  border-radius: 6px;
  background: url(../img/common/angel_arrow.png) bottom right no-repeat;
  background-color: #fff;
  /*-基本ボタンアクション(透明有効)-*/
  vertical-align: middle;
}
.angel_b:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}
.angel_b:active {
  /*-クリックで2px下がる処理-*/
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
}

.pink_skin .angel_b {
  background-color: #fff;
  border-color: #f687c7;
}

.cyan_skin .angel_b {
  background-color: #fff;
  border-color: #6adcdc;
}

.tab_mini {
  width: 100%;
  display: table;
  table-layout: fixed;
  font-size: 90%;
}
.tab_mini li {
  display: table-cell;
  position: relative;
  height: 2em;
  vertical-align: bottom;
}
.tab_mini li:not(.select_b) a {
  margin-bottom: 1px;
}
.tab_mini li.select_b a,
.tab_mini li.select_b a:hover,
.tab_mini li.select_b a:active {
  background-color: #c9c2af;
  cursor: auto;
  opacity: 1;
  color: #675e46;
  font-size: 120%;
}
.tab_mini li a {
  background-color: #a5dc28;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  line-height: 1.1em;
  display: block;
  margin: 0 1px;
  height: 2.5em;
  /*-基本ボタンアクション(透明有効)-*/
  color: #fff;
}
.tab_mini li a:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.tab_mini li a:active {
  /*-クリックで2px下がる処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.tab_mini li a span {
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  width: 100%;
  text-align: center;
}
.tab_mini li a img {
  width: 20px;
  background-color: #fff;
  border: 1px solid #fff;
  margin-top: 3px;
  border-radius: 50%;
}

.cyan_skin .tab_mini li.select_b a,
.cyan_skin .tab_mini li.select_b a:hover,
.cyan_skin .tab_mini li.select_b a:active {
  background-color: #c9c2af;
  color: #766c50;
}
.cyan_skin .tab_mini li a {
  background-color: #61dada;
}

.pink_skin .tab_mini li.select_b a,
.pink_skin .tab_mini li.select_b a:hover,
.pink_skin .tab_mini li.select_b a:active {
  background-color: #c9c2af;
  color: #766c50;
}
.pink_skin .tab_mini li a {
  background-color: #f984c8;
}

.charprof {
  padding: 0 4px;
  margin: 4px 6px 4px 0;
}
.charprof > .normal_b.long_b {
  margin: 10px auto;
  display: block;
  padding: 10px;
  width: 50%;
  min-width: 110px;
  max-width: 180px;
}
.charprof .tab_mini li.select_b a {
  font-size: 100%;
}
.charprof .tab_mini li:not(.select_b) a {
  height: calc(2.5em - 3px);
}

.prof_list {
  border-radius: 0 0 6px 6px;
  background-color: #d3cebf;
  padding: 1px 1px 5px;
  /*-marginの相殺を避けるため-*/
  overflow: hidden;
  *zoom: 1;
}
.prof_list li {
  background-color: #fff;
  max-width: calc(100% - 10px);
  border-radius: 6px;
  padding: 5px;
  margin: 5px 0 0 5px;
  display: inline-block;
  width: calc(50% - 7px);
  float: left;
}
.prof_list li > img {
  width: 50px;
  height: auto;
  vertical-align: top;
}
.prof_list li p {
  border-radius: 5px;
  padding: 0 6px;
  max-width: calc(100% - 66px);
  background-color: #f4eddb;
  display: inline-block;
  margin-left: 2px;
}

.parameter_ul li > p {
  background-color: transparent;
}

.angel_ul li {
  width: 100%;
  position: relative;
  overflow: hidden;
  *zoom: 1;
  background-color: #fff;
  padding: 0;
}
.angel_ul dl {
  border-collapse: separate;
  border-spacing: 2px;
  width: 50%;
  float: left;
  display: table;
  table-layout: fixed;
  position: relative;
}
.angel_ul dd, .angel_ul dt {
  display: table-cell;
}
.angel_ul dt {
  width: 4em;
  background-color: #f4eddb;
  border-radius: 5px 0 0 5px;
  text-align: center;
}
.angel_ul > dd {
  font-size: 0;
}
.angel_ul dd {
  border-radius: 0 5px 5px 0;
  padding: 2px 1px 1px;
  margin-left: 4.2em;
  margin-right: 5px;
  min-height: 1.5em;
}
.angel_ul dd > img {
  width: 16px;
  height: auto;
  vertical-align: top;
}

@media screen and (max-width: 1400px) {
  /*-1400px以下-*/
  .prof_list li {
    display: block;
    float: none;
    width: 100%;
  }

  .angel_ul dl {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .angel_ul dt, .angel_ul dd {
    display: table-cell;
  }
  .angel_ul dt {
    position: relative;
  }
}
/* 能力値 */
.parameter {
  margin: 5px;
  padding: 0;
  height: 12px;
  border: 1px solid #c9c2af;
  background-color: #a9a9a9;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5YTlhOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #a9a9a9), color-stop(100%, #b3b3b3));
  background-image: -moz-linear-gradient(left, #a9a9a9, #b3b3b3);
  background-image: -webkit-linear-gradient(left, #a9a9a9, #b3b3b3);
  background-image: linear-gradient(to right, #a9a9a9, #b3b3b3);
  position: relative;
}
.parameter span {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.case_test {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmNjZDRkIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmOGI1MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fceabb), color-stop(50%, #fccd4d), color-stop(51%, #f8b500), color-stop(100%, #fbdf93));
  background-image: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background-image: -webkit-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
  background-image: linear-gradient(to bottom, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
}

.case_0 {
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjJmMmYyIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkOWQ5ZDkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(50%, #f2f2f2), color-stop(51%, #d9d9d9), color-stop(100%, #ffffff));
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 50%, #d9d9d9 51%, #ffffff 100%);
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 50%, #d9d9d9 51%, #ffffff 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 50%, #d9d9d9 51%, #ffffff 100%);
}

.case_1 {
  background-color: #990000;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MyMGEwYSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjOTQwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM2NjAwMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjMjBhMGEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c20a0a), color-stop(50%, #940000), color-stop(51%, #660000), color-stop(100%, #c20a0a));
  background-image: -moz-linear-gradient(top, #c20a0a 0%, #940000 50%, #660000 51%, #c20a0a 100%);
  background-image: -webkit-linear-gradient(top, #c20a0a 0%, #940000 50%, #660000 51%, #c20a0a 100%);
  background-image: linear-gradient(to bottom, #c20a0a 0%, #940000 50%, #660000 51%, #c20a0a 100%);
}

.case_2 {
  background-color: #ff3300;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y1NjIzZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTYyZTAwIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNjYzI5MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNTYyM2QiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5623d), color-stop(50%, #e62e00), color-stop(51%, #cc2900), color-stop(100%, #f5623d));
  background-image: -moz-linear-gradient(top, #f5623d 0%, #e62e00 50%, #cc2900 51%, #f5623d 100%);
  background-image: -webkit-linear-gradient(top, #f5623d 0%, #e62e00 50%, #cc2900 51%, #f5623d 100%);
  background-image: linear-gradient(to bottom, #f5623d 0%, #e62e00 50%, #cc2900 51%, #f5623d 100%);
}

.case_3 {
  background-color: #ffff00;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3Zjc2ZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTZlNjAwIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNjY2NjMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2Y3NmUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7f76e), color-stop(50%, #e6e600), color-stop(51%, #cccc00), color-stop(100%, #f7f76e));
  background-image: -moz-linear-gradient(top, #f7f76e 0%, #e6e600 50%, #cccc00 51%, #f7f76e 100%);
  background-image: -webkit-linear-gradient(top, #f7f76e 0%, #e6e600 50%, #cccc00 51%, #f7f76e 100%);
  background-image: linear-gradient(to bottom, #f7f76e 0%, #e6e600 50%, #cccc00 51%, #f7f76e 100%);
}

.case_4 {
  background-color: #6600cc;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzNzVmMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjOGMxYWZmIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiM2MzAwYzciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTUyZTAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b375f0), color-stop(50%, #8c1aff), color-stop(51%, #6300c7), color-stop(100%, #9952e0));
  background-image: -moz-linear-gradient(top, #b375f0 0%, #8c1aff 50%, #6300c7 51%, #9952e0 100%);
  background-image: -webkit-linear-gradient(top, #b375f0 0%, #8c1aff 50%, #6300c7 51%, #9952e0 100%);
  background-image: linear-gradient(to bottom, #b375f0 0%, #8c1aff 50%, #6300c7 51%, #9952e0 100%);
}

.case_5 {
  background-color: #33ccff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlZDVmNyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMmVjYmZmIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMGFjZTYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZWQ1ZjciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6ed5f7), color-stop(50%, #2ecbff), color-stop(51%, #00ace6), color-stop(100%, #6ed5f7));
  background-image: -moz-linear-gradient(top, #6ed5f7 0%, #2ecbff 50%, #00ace6 51%, #6ed5f7 100%);
  background-image: -webkit-linear-gradient(top, #6ed5f7 0%, #2ecbff 50%, #00ace6 51%, #6ed5f7 100%);
  background-image: linear-gradient(to bottom, #6ed5f7 0%, #2ecbff 50%, #00ace6 51%, #6ed5f7 100%);
}

.case_6 {
  background-color: #99ffff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlZjdmNyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDBmZmZmIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMGU2ZTYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZWY3ZjciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6ef7f7), color-stop(50%, #00ffff), color-stop(51%, #00e6e6), color-stop(100%, #6ef7f7));
  background-image: -moz-linear-gradient(top, #6ef7f7 0%, #00ffff 50%, #00e6e6 51%, #6ef7f7 100%);
  background-image: -webkit-linear-gradient(top, #6ef7f7 0%, #00ffff 50%, #00e6e6 51%, #6ef7f7 100%);
  background-image: linear-gradient(to bottom, #6ef7f7 0%, #00ffff 50%, #00e6e6 51%, #6ef7f7 100%);
}

.case_7 {
  background-color: #ccffff;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyZjRmNCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDdlYmViIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMwMGRiZGIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMmY0ZjQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d2f4f4), color-stop(50%, #47ebeb), color-stop(51%, #00dbdb), color-stop(100%, #d2f4f4));
  background-image: -moz-linear-gradient(top, #d2f4f4 0%, #47ebeb 50%, #00dbdb 51%, #d2f4f4 100%);
  background-image: -webkit-linear-gradient(top, #d2f4f4 0%, #47ebeb 50%, #00dbdb 51%, #d2f4f4 100%);
  background-image: linear-gradient(to bottom, #d2f4f4 0%, #47ebeb 50%, #00dbdb 51%, #d2f4f4 100%);
}

.case_8 {
  background-color: #ffcc33;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhZTM5ZSIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZjNjFhIi8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNmNWI4MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOWRjODYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fae39e), color-stop(50%, #ffc61a), color-stop(51%, #f5b800), color-stop(100%, #f9dc86));
  background-image: -moz-linear-gradient(top, #fae39e 0%, #ffc61a 50%, #f5b800 51%, #f9dc86 100%);
  background-image: -webkit-linear-gradient(top, #fae39e 0%, #ffc61a 50%, #f5b800 51%, #f9dc86 100%);
  background-image: linear-gradient(to bottom, #fae39e 0%, #ffc61a 50%, #f5b800 51%, #f9dc86 100%);
}

.case_9 {
  background-color: #ffff99;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmY5NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWJlYjQ3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkYmRiMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmOTQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff94), color-stop(50%, #ebeb47), color-stop(51%, #dbdb00), color-stop(100%, #ffff94));
  background-image: -moz-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: -webkit-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: linear-gradient(to bottom, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
}

.case_10 {
  background-color: #ffff99;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmY5NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWJlYjQ3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkYmRiMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmOTQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff94), color-stop(50%, #ebeb47), color-stop(51%, #dbdb00), color-stop(100%, #ffff94));
  background-image: -moz-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: -webkit-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: linear-gradient(to bottom, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
}

.case_11 {
  background-color: #ffff99;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmY5NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWJlYjQ3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkYmRiMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmOTQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff94), color-stop(50%, #ebeb47), color-stop(51%, #dbdb00), color-stop(100%, #ffff94));
  background-image: -moz-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: -webkit-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: linear-gradient(to bottom, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
}

.case_12 {
  background-color: #ffff99;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmY5NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWJlYjQ3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkYmRiMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmOTQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff94), color-stop(50%, #ebeb47), color-stop(51%, #dbdb00), color-stop(100%, #ffff94));
  background-image: -moz-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: -webkit-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: linear-gradient(to bottom, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
}

.case_13 {
  background-color: #ffff99;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmY5NCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZWJlYjQ3Ii8+PHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiNkYmRiMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmOTQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff94), color-stop(50%, #ebeb47), color-stop(51%, #dbdb00), color-stop(100%, #ffff94));
  background-image: -moz-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: -webkit-linear-gradient(top, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
  background-image: linear-gradient(to bottom, #ffff94 0%, #ebeb47 50%, #dbdb00 51%, #ffff94 100%);
}

.icon_headline {
  color: #9ecc21;
  padding-left: 50px;
  position: relative;
  font-size: 160%;
  min-height: 34px;
  margin: 5px 0 10px;
  border-bottom: 1px solid #d3cebf;
}
.icon_headline:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  -moz-background-size: 50px 34px;
  -o-background-size: 50px 34px;
  -webkit-background-size: 50px 34px;
  background-size: 50px 34px;
  width: 50px;
  height: 34px;
  background-repeat: no-repeat;
  position: absolute;
  top: -3px;
  left: 0;
}
.icon_headline.mail_intray_icon:before {
  background-image: url(../img/mail_intray.png);
}
.icon_headline.mail_outtray_icon:before {
  background-image: url(../img/mail_outtray.png);
}
.icon_headline.mail_sendto_icon:before {
  background-image: url(../img/mail_sendto.png);
}
.icon_headline.mail_present_icon:before {
  background-image: url(../img/mail_present.png);
}

.mailbox_wrapper {
  margin: 5px 10px 20px;
}
.mailbox_wrapper .icon_headline {
  color: #857a5a;
  margin: 5px 0 0;
  border-bottom: none;
}
.mailbox_wrapper .tab_mini .select_b a,
.mailbox_wrapper .tab_mini .select_b a:hover,
.mailbox_wrapper .tab_mini .select_b a:active {
  background-color: #d3cebf;
  border-bottom: 1px solid #e8e5dd;
}

.mailbox_base {
  background-color: #e8e5dd;
  padding: 5px;
  border-radius: 0 0 8px 8px;
}

.mailbox_tray {
  background-color: #bfb9aa;
  border-radius: 6px;
  padding: 2px 6px;
  margin: 5px;
  max-height: 200px;
  min-height: 64px;
}
.mailbox_tray ul {
  overflow: auto;
  height: 100%;
  padding: 3px 5px;
  max-height: 196px;
}
.mailbox_tray li {
  background-color: #FFF;
  position: relative;
  margin-bottom: 1px;
  cursor: pointer;
}
.mailbox_tray li > div {
  padding: 5px;
}
.mailbox_tray li.unread {
  background-color: #f6ffe2;
}
.mailbox_tray li.unread:nth-child(even) {
  background-color: #e8fcba;
}
.mailbox_tray li.unread .title span {
  font-weight: bold;
}
.mailbox_tray li.unread .uname span {
  background-color: #d9fb8f;
  font-weight: bold;
}
.mailbox_tray li.unread .date span {
  color: #666;
}
.mailbox_tray li:nth-child(even) {
  background-color: #fefdf6;
}
.mailbox_tray li:nth-child(odd):hover, .mailbox_tray li:nth-child(even):hover {
  background-color: #d1f4fc;
}
.mailbox_tray li:nth-child(odd):hover .uname span, .mailbox_tray li:nth-child(even):hover .uname span {
  background-color: #abebfa;
}
.mailbox_tray li:nth-child(odd).select, .mailbox_tray li:nth-child(odd).select:hover, .mailbox_tray li:nth-child(even).select, .mailbox_tray li:nth-child(even).select:hover {
  background-color: #91c714;
  color: #fff;
  cursor: auto;
}
.mailbox_tray li:nth-child(odd).select .close_bx, .mailbox_tray li:nth-child(odd).select:hover .close_bx, .mailbox_tray li:nth-child(even).select .close_bx, .mailbox_tray li:nth-child(even).select:hover .close_bx {
  background-color: transparent;
}
.mailbox_tray li:nth-child(odd).select .uname span, .mailbox_tray li:nth-child(odd).select:hover .uname span, .mailbox_tray li:nth-child(even).select .uname span, .mailbox_tray li:nth-child(even).select:hover .uname span {
  background-color: #83b412;
}
.mailbox_tray li:nth-child(odd).select .date, .mailbox_tray li:nth-child(odd).select:hover .date, .mailbox_tray li:nth-child(even).select .date, .mailbox_tray li:nth-child(even).select:hover .date {
  color: #fff;
}
.mailbox_tray li:first-child {
  border-radius: 5px 5px 0 0;
}
.mailbox_tray li:last-child {
  border-radius: 0 0 5px 5px;
}
.mailbox_tray li:first-child:last-child {
  border-radius: 5px;
}
.mailbox_tray li > div {
  display: table;
  table-layout: fixed;
  width: calc(100% - 18px);
}
.mailbox_tray .uname,
.mailbox_tray .title,
.mailbox_tray .date {
  display: table-cell;
  vertical-align: middle;
}
.mailbox_tray .uname span,
.mailbox_tray .title span,
.mailbox_tray .date span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: block;
  margin: 0 5px;
  vertical-align: middle;
}
.mailbox_tray .uname {
  width: 20%;
}
.mailbox_tray .uname span {
  background-color: #f2fdda;
  border-radius: 5px;
  padding: 0 5px;
}
.mailbox_tray .title span {
  padding: 0 5px;
}
.mailbox_tray .date {
  color: #999;
  font-size: 84%;
  width: 130px;
  text-align: center;
}
.mailbox_tray .close_bx {
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 5px;
  background-color: #b4d170;
}

.mail_skin_white {
  background-color: #c9ea84;
  background-color: #fff;
  position: relative;
  z-index: 0;
  padding: 0 12px;
}
.mail_skin_white:before, .mail_skin_white:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.mail_skin_white:before {
  background-color: #effad7;
  border-radius: 18px / 50%;
}
.mail_skin_white:after {
  border-radius: 35px / 50%;
  right: 2px;
  left: 2px;
  background-color: #fff;
}

.mail_contents {
  padding: 5px;
  max-width: 720px;
  margin: 10px auto;
}
.mail_contents .mail_skin_white {
  border: 1px solid #c9c2af;
  border-radius: 6px;
  position: relative;
}
.mail_contents .mail_title {
  font-size: 140%;
  margin: 0;
  overflow: hidden;
  *zoom: 1;
  color: #8dbc1f;
  margin-bottom: 5px;
  margin-left: 130px;
}
.mail_contents .status {
  margin: 8px 8px 4px 8px;
  position: relative;
  min-height: 73px;
}
.mail_contents .status .user {
  background-color: #eefad0;
  border-radius: 5px;
  padding: 5px;
  margin-left: 130px;
  overflow: hidden;
  *zoom: 1;
}
.mail_contents .status .user span {
  display: block;
}
.mail_contents .status .user .user_in {
  float: left;
}
.mail_contents .status .user .item {
  background-color: #8dbc1f;
  border-radius: 10px;
  color: #fff;
  padding: 0 10px;
  float: right;
}
.mail_contents .chara_base3 {
  width: 100px;
  position: absolute;
  left: 10px;
  margin: 0;
  bottom: 8px;
}
.mail_contents img:first-of-type {
  width: 60px;
  display: inline-block;
}

.mail_data {
  color: #999;
  font-size: 76%;
  float: right;
  margin-top: 5px;
}

.mail_body {
  margin: 10px 20px;
  min-height: 80px;
  background-image: url(../img/note_line.gif);
  -moz-background-size: 10px 1.6em;
  -o-background-size: 10px 1.6em;
  -webkit-background-size: 10px 1.6em;
  background-size: 10px 1.6em;
  font-size: 110%;
  line-height: 1.6em;
  color: #666;
}

.send_mail {
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  margin: 0 auto 10px;
  border: 1px dashed #cfc9b8;
  max-width: 720px;
}
.send_mail input[type="text"],
.send_mail textarea,
.send_mail select {
  display: block;
  margin-bottom: 8px;
}
.send_mail input[type="text"],
.send_mail textarea {
  width: 100%;
  max-width: 640px;
}
.send_mail label {
  color: #8c8c8c;
}
.send_mail .senditem {
  background-color: #cdeb8d;
  padding: 8px;
  border-radius: 6px;
  display: inline-block;
  color: #75a01b;
}
.send_mail .senditem p {
  display: inline-block;
  margin: 5px;
}
.send_mail .senditem p span {
  font-size: 120%;
  font-weight: bold;
  background-color: #f3fae4;
  padding: 0 5px;
  border-radius: 8px / 50%;
  display: block;
  text-align: center;
  margin-bottom: 5px;
}
.send_mail img {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: relative;
  border: 1px solid #a3db2d;
  background-color: #fff;
  border-radius: 6px;
  margin: 2px;
  vertical-align: top;
}
.send_mail .normal_b_div {
  text-align: right;
}
.send_mail .normal_b_div button {
  padding: 10px;
  max-width: 120px;
  min-width: 100px;
}

.mailbox_present {
  background-color: #e8e5dd;
  border-radius: 8px;
  padding: 4px;
  margin: 10px auto;
  max-width: 730px;
}
.mailbox_present .send_mail {
  position: relative;
  margin: 0;
}

.pagination_wrapper {
  margin: 5px 0;
}
.pagination_wrapper .pagination_flame {
  padding: 5px;
}

.cp_area .cp_club_data {
  border-style: solid;
  border-color: #a7d16f;
  border-width: 1px;
  border-radius: 5px;
  padding: 3px 0;
  margin: 5px auto;
  position: relative;
  background-color: #eee;
}

.cp_area_inner {
  background-color: #ded9ce;
  padding: 10px;
  border-radius: 8px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.club_feather {
  /*-羽アイコン-*/
  padding-left: 16px;
  background-image: url(../img/common/i_feather_s.png);
  min-height: 16px;
  background-repeat: no-repeat;
  background-position: left 20%;
  -moz-background-size: 14px 14px;
  -o-background-size: 14px 14px;
  -webkit-background-size: 14px 14px;
  background-size: 14px 14px;
}
.club_feather span {
  font-weight: bold;
  margin-left: 0.3em;
}
.club_feather span:after {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: -1px;
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e5e5e5;
}
.club_feather span:last-child:after {
  content: "";
  margin: 0;
  display: none;
}

.club_name {
  /*-サークル名-*/
  font-size: 150%;
  border-bottom: 1px solid #c9ea84;
  font-weight: bold;
  color: #8dbc1f;
  line-height: 1.4em;
  overflow: hidden;
  *zoom: 1;
}

.club_data_member {
  /*-会員数-*/
  font-size: 80%;
  text-align: right;
  vertical-align: bottom;
  margin: 0 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  margin-bottom: 2px;
  float: right;
  line-height: 1.5em;
}
.club_data_member span {
  font-size: 150%;
  font-weight: bold;
}

.club_flame {
  margin: 5px 0;
  min-width: 270px;
  color: #8dbc1f;
  border-radius: 10px;
  border: 2px solid #fff;
  background-color: #c9ea7e;
  position: relative;
  z-index: 0;
  padding: 0 20px 0 15px;
  overflow: hidden;
  *zoom: 1;
}
.club_flame:before, .club_flame:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.club_flame:before {
  border-radius: 18px / 50%;
  background-color: #ebf7cf;
}
.club_flame:after {
  border-radius: 35px / 50%;
  right: 2px;
  left: 2px;
  background-color: #fff;
}

.club_flame.cyan_skin {
  /*-青テスト-*/
  color: #29adad;
  background-color: #93e6e6;
}
.club_flame.cyan_skin:before {
  background-color: #d7f8f8;
}
.club_flame.cyan_skin .club_name {
  border-bottom-color: #bcefef;
  color: #29adad;
}
.club_flame.cyan_skin .club_data_txt {
  color: #249898;
  background-color: #e8fbfb;
}

.club_data_r {
  float: right;
  width: calc(100% - 70px);
}

.cp_area .normal_b_div {
  display: block;
  position: static;
  padding: 0 5px;
  width: calc(100% - 70px);
  float: right;
}
@media screen and (max-width: 480px) {
  .cp_area {
    /*-480px以下-*/
  }
  .cp_area .normal_b_div {
    margin-left: 0px;
    float: inherit;
    clear: both;
    width: 100%;
    margin-bottom: 5px;
  }
}

.club_b {
  height: 40px;
  width: 80px;
  position: absolute;
  right: 20px;
  font-size: 110%;
}

.club_data_txt {
  margin: 5px;
  background-color: #fbfbe2;
  border-radius: 5px;
  padding: 5px;
  color: #9c9c1a;
  width: calc(100% - 96px);
  display: inline-block;
}

.club_data_l {
  padding: 5px;
  float: left;
  vertical-align: top;
  position: relative;
}
.club_data_l img {
  /*--アバター画像--*/
  width: 60px;
  height: 60px;
  vertical-align: top;
  border-radius: 8px;
}

.state_blue,
.state_green,
.state_red,
.state_gray {
  color: #fff;
  text-align: center;
  margin-top: 3px;
  width: 60px;
  font-size: 90%;
  border-radius: 6px;
  border: 2px solid #ffe335;
}

.state_blue {
  /*-入部-*/
  background-color: #75b1d5;
}

.state_green {
  /*-仮入部-*/
  background-color: #93cc47;
}

.state_red {
  /*-募集中-*/
  background-color: #f37c55;
}

.state_gray {
  /*-募集中止-*/
  background-color: #a3a3a3;
  border: 2px solid #e5e5e5;
}

.club_data_form {
  /*-入部フォーム-*/
  display: table-cell;
  margin-left: 65px;
  position: relative;
  width: 255px;
}
.club_data_form:after {
  /*-下部ボタンのためのスペース-*/
  content: "";
  display: block;
  height: 30px;
  width: 100%;
}
.club_data_form p {
  /*--説明文--*/
  /*-table-cellだとmin-heightが効かないので上の処理-*/
  display: block;
  padding: 0 5px;
  margin: 0;
  margin-left: 3px;
  color: #999;
  font-size: 90%;
}
.club_data_form textarea {
  width: 243px;
  margin-left: 5px;
}

.club_data_bottom {
  position: absolute;
  z-index: 10;
  width: 245px;
  bottom: 3px;
  right: 5px;
}
.club_data_bottom button {
  border: none;
  background-color: #a0ca67;
  border-radius: 3px;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  padding: 4px 3px;
}
.club_data_bottom button:hover {
  background-color: #f9f171;
  color: #fff;
}
.club_data_bottom button.b_gray {
  /*-名前に注意 PCとあわせてる-*/
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.club_data_bottom button.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.club_data_bottom button.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.club_data_bottom button:last-child {
  width: 80px;
  text-align: center;
  float: right;
}

/*-部活/同好会-*/
.edit_wrapper {
  border-radius: 10px;
  background-color: #eceae3;
  padding-top: 1px;
  padding-bottom: 1px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.edit_wrapper > div {
  background-color: #f2f1ec;
  border: 1px dashed #c9c2af;
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  *zoom: 1;
}
.edit_wrapper .base_headline,
.edit_wrapper .sub_headline {
  color: #94be1f;
}
.edit_wrapper .sub_h2 {
  color: #a9a9a9;
  display: block;
}
.edit_wrapper input,
.edit_wrapper textarea {
  border-color: #ccc;
}
.edit_wrapper input[type="text"] {
  vertical-align: middle;
}
.edit_wrapper input[type="text"] + input[type="text"] {
  margin-top: 5px;
}
.edit_wrapper input[type="text"] + input[type="text"] + select {
  margin-top: 5px;
}
.edit_wrapper input[type="text"] + input[type="text"] + select + input[type="text"] {
  margin-top: 5px;
  margin-bottom: 5px;
}
.edit_wrapper textarea {
  vertical-align: top;
}
.edit_wrapper textarea + select {
  margin-top: 5px;
  margin-bottom: 5px;
}
.edit_wrapper select {
  vertical-align: middle;
}
.edit_wrapper textarea,
.edit_wrapper input[type="text"] {
  width: calc(100% - 90px);
}
.edit_wrapper .normal_b {
  min-width: 80px;
}
.edit_wrapper .normal_b.gray_b, .edit_wrapper .normal_b.gray_b:hover, .edit_wrapper .normal_b.gray_b:active {
  background-color: #e5e5e5;
  color: #bfbfbf;
}
.edit_wrapper button {
  vertical-align: middle;
  margin: 0;
}
.edit_wrapper .col_red {
  font-size: 115%;
  margin-left: 10px;
}
.edit_wrapper .section {
  /*-ドット枠-*/
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  margin-top: 10px;
  position: relative;
  border: 1px dashed #c9c2af;
}
.edit_wrapper .section .normal_b {
  width: 130px;
  margin: 0;
  position: relative;
  right: -10px;
}
.edit_wrapper .section p {
  width: calc(100% - 140px);
  display: inline-block;
  color: #8db61e;
}
.edit_wrapper label + .normal_b {
  margin: 5px 0;
}
.edit_wrapper .cate1,
.edit_wrapper .cate2 {
  margin: 5px;
  display: inline-block;
  vertical-align: top;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 5px 10px;
}
.edit_wrapper .cate1 p,
.edit_wrapper .cate2 p {
  margin: 5px;
}
.edit_wrapper .cate2 {
  margin-right: 10px;
}
.edit_wrapper .cate2 + .normal_b {
  margin: 5px 0;
}
.edit_wrapper .cate1 p {
  display: inline-block;
  margin-right: 10px;
}

/*-部活/同好会管理-*/
.club_setup_wrapper {
  border-radius: 8px;
  background-color: #e5e5e5;
  padding: 10px 8px;
  margin: 0 -5px;
}
.club_setup_wrapper .club_setup {
  margin-bottom: 4px;
  border-radius: 8px;
  padding: 5px 0;
  border: none;
}

.club_setup {
  overflow: hidden;
  *zoom: 1;
  padding: 0.8em 5px;
  position: relative;
  background-color: #fff;
  border: 2px solid #e8e5dd;
  border-radius: 10px;
  margin-bottom: 3px;
  padding: 5px;
}
.club_setup:only-of-type {
  border-color: transparent;
  border: none;
  background-color: #fff;
}
.club_setup textarea {
  height: 5em;
  float: left;
  width: calc(100% - 90px);
  white-space: pre-line;
  font-size: 90%;
}
.club_setup .user_header {
  margin: 0 0 8px;
  padding: 4px 8px;
  background-color: #d6f197;
  color: #679400;
  float: left;
  width: calc(100% - 90px);
}
.club_setup .chara_base3 {
  width: 64px;
  margin: 10px;
  margin-right: 0;
  margin-bottom: 35px;
  margin-left: 13px;
  float: left;
}
.club_setup .chara_base3:before {
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  border-color: #eee;
}
.club_setup .chara_base3 img {
  width: 80%;
}
.club_setup .chara_base3 p {
  position: absolute;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  font-size: 110%;
}

.club_r {
  float: right;
  width: calc(100% - 90px);
  padding: 4px;
}

.user_date {
  display: inline-block;
  background-color: #f2f2f2;
  border-radius: 10px / 50%;
  margin: 0;
  padding: 0;
  width: 80px;
  height: 26px;
  overflow: hidden;
  font-size: 90%;
  color: #a9a9a9;
  text-align: center;
  float: right;
  line-height: 1.25em;
}
.user_date span {
  letter-spacing: -0.02em;
}

.club_bottom {
  float: left;
  width: calc(100% - 90px);
  margin-bottom: -8px;
}
.club_bottom button {
  margin: 4px;
  min-width: 80px;
}

@media screen and (min-width: 1001px) and (max-width: 1048px), screen and (min-width: 901px) and (max-width: 940px), screen and (min-width: 641px) and (max-width: 680px), screen and (max-width: 520px) {
  /*- 900以上～1100px以下 -*/
  .club_setup .user_header {
    float: none;
    width: 100%;
    display: block;
    margin: 0;
  }
  .club_setup textarea {
    float: none;
    width: 100%;
  }
  .club_setup textarea + .normal_b {
    margin-top: 5px;
  }

  .user_date {
    display: block;
    width: 100%;
    float: none;
    height: inherit;
    border-radius: 8px;
    text-align: left;
    padding: 3px 10px;
    margin: 5px 0;
  }
  .user_date br {
    display: none;
  }
  .user_date span {
    display: inline-block;
  }
  .user_date span:before {
    content: "：";
  }

  .club_bottom {
    margin-left: -92px;
    margin-top: 5px;
    width: auto;
  }
}
@media screen and (max-width: 400px) {
  /*- 400px以下 -*/
  .edit_wrapper > div {
    padding: 5px;
    margin: 5px;
  }

  .club_r {
    width: calc(100% - 74px);
    padding: 2px;
  }

  .club_setup .chara_base3 {
    width: 56px;
    margin-top: 7px;
    margin-left: 7px;
    margin-right: 0;
  }
  .club_setup .chara_base3:before {
    border-radius: 12px;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
  }
  .club_setup .chara_base3 p {
    font-size: 100%;
  }

  .club_setup_wrapper {
    padding: 5px;
    max-height: 640px;
    overflow: auto;
  }

  .club_bottom {
    margin-left: -80px;
    width: 110px;
  }
  .club_bottom button {
    min-width: 90px;
    font-size: 90%;
  }
}
/*-トップログイン用-*/
.top_page .controller {
  display: none;
}
.top_page .top_area {
  display: none;
}
.top_page .sub_contents {
  display: none;
}

/*-トップページ用iframe-*/
.top_page_iframe {
  display: block;
  position: relative;
  padding: 0 5px;
}

@media screen and (max-width: 1000px) {
  .top_page .sub_wraper {
    display: block;
  }
  .top_page .info_area_wraper {
    display: none;
  }
  .top_page .main_area {
    width: 100%;
  }
  .top_page .information_area2 {
    width: calc(100% - 10px);
    float: none;
  }
}
@media screen and (max-width: 900px) {
  .top_page .top_area {
    display: block;
  }
}
/*-ログインメニュー周り-*/
.login_moba,
.login_gmo {
  position: absolute;
  top: 0;
  right: 255px;
  border-radius: 0 0 12px 12px;
  background-color: #c9f47d;
  border: 2px solid #96d336;
  border-top: 0;
}

.login_gmo {
  width: 40%;
}

.login_moba_inner,
.login_gmo_inner {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 5px;
  border-radius: 0 0 32px 32px;
  z-index: -1;
}

.login_menu {
  position: absolute;
  top: 0;
  right: 255px;
  background-color: #c9f47d;
  border: 2px solid #96d336;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.login_menu.twitter_menu .login_menu_inner {
  padding-bottom: 28px;
}

.login_menu_inner {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  padding: 5px;
  border-radius: 0 0 32px 32px;
  z-index: -1;
}

.login_menu_inner p.error_msg {
  color: #f94d0b;
  width: 330px;
  margin: 6px;
}
@media screen and (max-width: 640px) {
  .login_menu_inner p.error_msg {
    /*-$width_0640以下 ボタンの数-*/
    width: 210px;
  }
}
.login_menu_inner input {
  font-size: 90%;
  margin: 2px 5px;
}
.login_menu_inner > div {
  margin: 0 110px 0 0px;
}
.login_menu_inner > div span {
  display: inline-block;
  font-size: 90%;
  vertical-align: middle;
  width: 7em;
  text-align: right;
}
.login_menu_inner button {
  position: absolute;
}
.login_menu_inner button.login_btn {
  top: 1px;
  right: 1px;
}
.login_menu_inner button.twitter_btn {
  top: 42px;
  right: 20px;
}

.login_moba_inner p,
.login_gmo_inner p {
  max-width: 250px;
  margin: 5px;
  background-color: #fffcd3;
  padding: 5px;
  border-radius: 5px;
}
.login_moba_inner > div,
.login_gmo_inner > div {
  margin: 5px;
  text-align: center;
}
.login_moba_inner > div input,
.login_gmo_inner > div input {
  vertical-align: sub;
  margin: 5px 10px 5px 0;
}
.login_moba_inner > div a,
.login_gmo_inner > div a {
  text-decoration: underline;
}

.login_gmo_inner p {
  max-width: inherit;
}

@media screen and (min-width: 1201px) {
  /*- 1200px以上 -*/
  .login_gmo {
    display: inline-block;
    background-color: #fff;
    border-radius: 6px;
    margin: 7px 0 0;
    border: none;
    right: 130px;
    left: 180px;
    width: inherit;
  }

  .login_gmo_inner {
    padding: inherit;
    border-radius: 0;
  }
  .login_gmo_inner p {
    max-width: inherit;
    margin-right: 152px;
    padding: 0 5px;
    border-radius: 5px;
    line-height: 1.3;
  }
  .login_gmo_inner > div {
    display: inline-block;
    position: absolute;
    right: 2px;
    top: -1px;
  }
  .login_gmo_inner > div .normal_b {
    margin: 0;
  }
  .login_gmo_inner > div input {
    margin: 5px 2px 0 10px;
  }
}
@media screen and (min-width: 878px) {
  /*- 1000px以上 -*/
  .login_moba {
    display: inline-block;
    background-color: #fff;
    border-radius: 6px;
    margin: 7px 0 0;
    position: relative;
    top: 0;
    border: none;
    right: 0;
  }

  .login_moba_inner {
    padding: inherit;
    border-radius: 0;
  }
  .login_moba_inner p {
    max-width: inherit;
    margin-right: 152px;
  }
  .login_moba_inner > div {
    display: inline-block;
    position: absolute;
    right: 2px;
    top: 2px;
  }
  .login_moba_inner > div input {
    margin: 5px 2px 0 10px;
  }

  .login_menu {
    display: inline-block;
    border: none;
    height: 37px;
    position: relative;
    top: 8px;
    right: 0;
    border-radius: 0;
    border-right: 1px solid #b8dc67;
    background-color: transparent;
  }
  .login_menu.twitter_menu .login_menu_inner {
    margin-right: 180px;
  }
  .login_menu.twitter_menu .login_menu_inner button.login_btn {
    right: 70px;
  }
  .login_menu.twitter_menu .login_menu_inner button.twitter_btn {
    position: absolute;
    right: 5px;
    top: -1px;
    margin: 0;
  }
  .login_menu .login_menu_inner {
    border-radius: 0;
    background-color: transparent;
    margin-right: 120px;
  }
  .login_menu .login_menu_inner button.login_btn {
    vertical-align: top;
    margin: 0;
    right: 8px;
    top: -1px;
    position: absolute;
  }
  .login_menu .login_menu_inner > div {
    margin: 0;
    display: inline-block;
  }
  .login_menu .login_menu_inner > div span {
    display: inline-block;
    width: inherit;
    font-size: 86%;
  }
  .login_menu .login_menu_inner > div input {
    margin: 0;
  }
  .login_menu .login_menu_inner p.error_msg {
    position: absolute;
    color: #f94d0b;
    width: inherit;
    margin: 6px;
    max-width: 430px;
    background-color: #fff;
    border-radius: 6px;
    padding: 6px;
    top: 28px;
    border: 1px solid #a9a9a9;
    left: 0;
    z-index: 1;
  }
  .login_menu .login_menu_inner p.error_msg:before, .login_menu .login_menu_inner p.error_msg:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    display: inline-block;
    position: absolute;
    left: 20px;
  }
  .login_menu .login_menu_inner p.error_msg:before {
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent #a9a9a9 transparent;
    top: -12px;
    z-index: -1;
  }
  .login_menu .login_menu_inner p.error_msg:after {
    border-width: 0 8px 12px 8px;
    border-color: transparent transparent #fff transparent;
    top: -10px;
  }

  .login_menu_inner {
    background-color: #fff;
    padding: 5px;
    border-radius: 0 0 32px 32px;
    z-index: -1;
  }
}
@media screen and (max-width: 877px) {
  /*- $width_0900main 以上 -*/
  .login_menu,
  .login_moba {
    -moz-box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
    -webkit-box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
    box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
    z-index: 2;
  }

  .login_menu,
  .login_moba {
    right: 0px;
  }
}
@media screen and (max-width: 640px) {
  /*-$width_0640以下 ボタンの数-*/
  .login_menu {
    border-radius: 0 0 8px 8px;
  }

  .login_menu_inner {
    border-radius: 0 0 22px 22px;
  }
  .login_menu_inner > div span {
    display: none;
  }
  .login_menu_inner > div {
    margin: 0 60px 0 5px;
  }
  .login_menu_inner button.twitter_btn {
    right: 1px;
  }

  .login_moba {
    max-width: 180px;
  }

  .login_gmo {
    width: inherit;
    right: 0;
    left: 130px;
    z-index: 5;
  }

  .login_gmo_inner p {
    margin: 0;
  }
  .login_gmo_inner > div {
    margin: 0;
  }
}
/*-友だち一覧-*/
/*- 吹き出し -*/
.greeting_balloon {
  border-radius: 16px;
  background-color: #fff;
  border: 2px solid #b1ea1f;
  color: #729919;
  padding: 5px 8px;
  position: relative;
  z-index: 5;
  margin: 0 0 10px;
  display: inline-block;
  min-width: 100px;
  text-align: center;
  left: -10px;
  margin-left: -20px;
}
.greeting_balloon:before, .greeting_balloon:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 14px 5px 0;
  top: 12px;
}
.greeting_balloon:before {
  border-color: transparent #b1ea1f transparent;
  right: 100%;
  z-index: -1;
}
.greeting_balloon:after {
  border-color: transparent #fff transparent;
  right: calc(100% - 6px);
}
.greeting_balloon .bold {
  color: #698c17;
}
.greeting_balloon + .normal_b_div button {
  margin: 0 5px;
}

/*-友人一覧用-*/
.friend_base {
  margin: 5px auto 20px;
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.friend_base_inner {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
}
.friend_base_inner .sub_headline {
  color: #fff;
  background-color: #b8e149;
  border-radius: 8px;
  padding: 2px 8px;
}
.friend_base_inner .sub_headline.gray_skin {
  background-color: #808080;
}
.friend_base_inner .friend_user + .sub_headline {
  margin-top: 20px;
}

.friend_user .plus_b {
  background-color: #c2bb9c;
  color: #6b5d2c;
}
.friend_user:not(.gray_skin) .user_data {
  background-color: #f2eee2;
  border: 2px solid #ede1c5;
}
.friend_user:not(.gray_skin) .tab_mini.user_data_top .select_b a,
.friend_user:not(.gray_skin) .tab_mini.user_data_top .select_b a:hover,
.friend_user:not(.gray_skin) .tab_mini.user_data_top .select_b a:active {
  background-color: #eae0c7;
}

.user_state {
  text-align: center;
}
.user_state .favorite_star {
  margin: 5px;
  -moz-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  -moz-transform-origin: center 50%;
  -ms-transform-origin: center 50%;
  -webkit-transform-origin: center 50%;
  transform-origin: center 50%;
}

.attend {
  /*-登校-*/
  border-radius: 16px;
  background-color: #fff;
  border: 2px solid #b1ea1f;
  color: #729919;
  padding: 3px;
  margin: 5px 8px;
  position: relative;
  z-index: 5;
  text-align: center;
}
.attend.gray_b {
  border-color: #dcd7cb;
  color: #b5ab91;
  background-color: #dcd7cb;
}

.plus_b {
  /*-プラスボタン-*/
  width: auto;
  height: 2em;
  text-align: left;
  padding: 0px 22px 0 8px;
  font-size: 100%;
  background-color: #ccc;
  border-radius: 6px;
  border: none;
  border-color: transparent;
  color: #333;
  /*-基本ボタンアクション(透明有効)-*/
  position: relative;
}
.plus_b:hover {
  /*-マウスオーバーで半透明処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}
.plus_b:active {
  /*-クリックで2px下がる処理-*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.plus_b:after {
  content: "";
  display: inline-block;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 333.32593% 3400%;
  -o-background-size: 333.32593% 3400%;
  -webkit-background-size: 333.32593% 3400%;
  background-size: 333.32593% 3400%;
  background-position: 100% 8.82353%;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 100;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 2px;
}

.friend_prof .tab_mini {
  max-width: 300px;
  margin-left: auto;
  padding: 0 6px;
}
.friend_prof .tab_mini li.select_b a,
.friend_prof .tab_mini li.select_b a:hover,
.friend_prof .tab_mini li.select_b a:active {
  background-color: #cfc9b8;
}
.friend_prof textarea[readonly] {
  background-color: transparent;
  resize: none;
  height: inherit;
  font-size: 120%;
  color: #766c50;
  border-radius: 0;
  border: none;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8);
}
.friend_prof textarea[readonly] + span {
  color: #aa9f82;
  margin-bottom: 5px;
  display: inline-block;
}
.friend_prof .prof_list {
  border-radius: 6px;
}
.friend_prof .group_base {
  margin: 0;
  padding: 2px 6px;
  background-color: #ded9ce;
}
.friend_prof .group_base > span {
  color: #857a5a;
}

/*-小サイズ-*/
.mini_size .user_l {
  width: 130px;
}
.mini_size .user_r {
  width: calc(100% - 130px);
  min-height: inherit;
}
.mini_size .favorite_star,
.mini_size .level_icon,
.mini_size .user_bottom,
.mini_size .friend_prof {
  display: none;
}
.mini_size .chara_base3 {
  width: 100px;
}
.mini_size .greeting_balloon {
  margin-bottom: 5px;
}
.mini_size .user_header .class {
  font-size: 90%;
  border-right: 1px solid #93c520;
  margin: 0;
}
.mini_size .user_header .name {
  display: inline-block;
  padding: 0 4px;
  font-size: 110%;
}
.mini_size .user_header .name:before {
  display: none;
}
.mini_size .user_header .icon,
.mini_size .user_header .relation {
  display: none;
}
.mini_size .greeting_balloon {
  left: 0;
  margin-left: 0;
  margin-right: 8px;
}
.mini_size .attend {
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 15px;
}

.friend_memo {
  border-radius: 8px;
  font-size: 100%;
  color: #847a51;
  background-color: rgba(255, 255, 255, 0.8);
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 8px;
}

.logout {
  position: relative;
  width: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #b1a598;
  border: 2px solid #a2978b;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  *zoom: 1;
  z-index: 1;
}
.logout:before {
  content: "";
  display: block;
  position: absolute;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxYTU5OCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjM1MHB4IiBzdG9wLWNvbG9yPSIjYjFhNTk4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWI4YzdiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(177, 165, 152, 0.5)), color-stop(350px, #b1a598), color-stop(100%, #9b8c7b));
  background-image: -moz-linear-gradient(top, rgba(177, 165, 152, 0.5) 0%, #b1a598 350px, #9b8c7b 100%);
  background-image: -webkit-linear-gradient(top, rgba(177, 165, 152, 0.5) 0%, #b1a598 350px, #9b8c7b 100%);
  background-image: linear-gradient(to bottom, rgba(177, 165, 152, 0.5) 0%, #b1a598 350px, #9b8c7b 100%);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  z-index: -1;
}
.logout .flame_balloon {
  font-size: 120%;
}
.logout .flame_balloon .balloon_tip {
  top: 36%;
}
.logout .flame_balloon .balloon_body {
  min-height: 60px;
  display: table;
  border-radius: 22px / 50%;
}
.logout .flame_balloon .balloon_body:before {
  border-radius: 22px / 50%;
}
.logout .flame_balloon .balloon_body > p {
  display: table-cell;
  vertical-align: middle;
}
@media screen and (min-width: 481px) {
  .logout .flame_balloon .balloon_body {
    min-height: 50px;
    min-width: 180px;
  }
  .logout .flame_balloon .balloon_tip {
    left: 100px;
    top: inherit;
    bottom: -8px;
  }
  .logout .flame_balloon .balloon_tip:before, .logout .flame_balloon .balloon_tip:after {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}
.logout .normal_b.long_b {
  margin: 10px auto;
  display: block;
  padding: 10px;
  width: 50%;
  min-width: 110px;
  max-width: 180px;
}

.logout_form {
  margin-top: 10px;
  text-align: right;
  max-width: 530px;
  margin-left: auto;
}
.logout_form p {
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 0 6px;
  margin-bottom: 3px;
  background-color: rgba(132, 111, 90, 0.8);
}
.logout_form textarea {
  height: 4em;
  border: 1px solid #8e7e6c;
  background-color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
}
.logout_form textarea:focus {
  border-color: #999;
  background-color: #fafafa;
}

.logout_left {
  width: 180px;
  float: left;
}

.logout_right {
  width: calc(100% - 180px);
  float: right;
}

.logout_chara {
  position: relative;
}
.logout_chara .npc_chara {
  /*-お姉さん-*/
  width: 230px;
  height: auto;
  position: relative;
  left: -30px;
  top: -80px;
}

.logout_bonus {
  background-color: #fff;
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
}

.logout_bonus_ul {
  letter-spacing: -0.4em;
}
.logout_bonus_ul li {
  /*-ベース-*/
  position: relative;
  border-radius: 8px;
  background-color: #7dbe06;
  z-index: 1;
  padding: 3px 8px 3px 64px;
  display: inline-block;
  color: #444;
  min-width: 176px;
  letter-spacing: normal;
  margin: 2px;
  width: calc(25% - 4px);
}
.logout_bonus_ul li:before {
  /*-枠線-*/
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 0;
  bottom: 0;
  background-color: #a1d640;
  border-radius: 26px / 50%;
  z-index: -1;
}
.logout_bonus_ul li.active {
  background-color: #ffd644;
}
.logout_bonus_ul li.active:before {
  background-color: #ffeba2;
}
.logout_bonus_ul li.active .rank_name,
.logout_bonus_ul li.active .item_name {
  background-color: #d0a302;
}
.logout_bonus_ul li.rank_up:after {
  content: "";
  display: inline-block;
  background-image: url(../img/rankup_balloon.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 31px;
  height: 29px;
  position: absolute;
  right: 4px;
  top: -16px;
}
@media screen and (max-width: 1600px) {
  .logout_bonus_ul li {
    /*-1600x以下-*/
    width: calc(33.3% - 4px);
  }
}
@media screen and (max-width: 1360px) {
  .logout_bonus_ul li {
    width: calc(50% - 4px);
  }
}
@media screen and (max-width: 1130px) {
  .logout_bonus_ul li {
    width: calc(100% - 4px);
  }
}
@media screen and (max-width: 1126px) {
  .logout_bonus_ul li {
    /*-1000x以下 -*/
    width: calc(50% - 4px);
  }
}
@media screen and (max-width: 877px) {
  .logout_bonus_ul li {
    /*-0900x以下 -*/
    width: calc(33.3% - 4px);
  }
}
@media screen and (max-width: 824px) {
  .logout_bonus_ul li {
    width: calc(50% - 4px);
  }
}
@media screen and (max-width: 640px) {
  .logout_bonus_ul li {
    width: calc(100% - 4px);
  }
}
@media screen and (max-width: 480px) {
  .logout_bonus_ul li {
    width: calc(50% - 4px);
  }
}
@media screen and (max-width: 430px) {
  .logout_bonus_ul li {
    width: calc(100% - 4px);
  }
}

.rank_name,
.item_name {
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  background-color: #6fa50a;
  padding: 2px 10px;
  line-height: 1.2em;
}

.level_count span,
.item_count span {
  font-size: 150%;
  margin: 0 0.2em;
}

.rank_icon,
.item_icon {
  width: 46px;
  height: 46px;
  position: absolute;
  left: 14px;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.rank_icon img,
.item_icon img {
  width: 24px;
  margin-top: 11px;
}

.logout_item {
  background-color: #8e7c69;
  border-radius: 6px;
  padding: 5px 10px;
  margin: 10px 0;
  color: #fff;
}

.logout_item_ul li {
  border-bottom: 1px dashed #c1af9c;
  padding: 5px 0;
}
.logout_item_ul li img {
  background-color: #fff;
  border-radius: 8px;
  width: 40px;
  vertical-align: top;
}
.logout_item_ul li p {
  display: inline-block;
  width: calc(100% - 50px);
  margin-left: 5px;
  vertical-align: top;
}

@media screen and (max-width: 480px) {
  .logout {
    display: block;
  }
  .logout:before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxYTU5OCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjIyNHB4IiBzdG9wLWNvbG9yPSIjYjFhNTk4Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWI4YzdiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(177, 165, 152, 0.5)), color-stop(224px, #b1a598), color-stop(100%, #9b8c7b));
    background-image: -moz-linear-gradient(top, rgba(177, 165, 152, 0.5) 0%, #b1a598 224px, #9b8c7b 100%);
    background-image: -webkit-linear-gradient(top, rgba(177, 165, 152, 0.5) 0%, #b1a598 224px, #9b8c7b 100%);
    background-image: linear-gradient(to bottom, rgba(177, 165, 152, 0.5) 0%, #b1a598 224px, #9b8c7b 100%);
  }
  .logout .flame_balloon {
    position: relative;
    width: calc(100% - 110px);
    max-width: inherit;
    float: right;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .logout .balloon_tip {
    left: -15px;
  }

  .logout_left,
  .logout_right {
    display: block;
    float: inherit;
  }

  .logout_right {
    width: 100%;
    position: relative;
    clear: both;
  }

  .logout_chara {
    min-height: 150px;
  }
  .logout_chara .npc_chara {
    z-index: 0;
    position: absolute;
    left: -60px;
    top: -100px;
  }
}
/*-iframe_player-*/
/*-ここら辺は使われなくなるかも2018.06.07-*/
.iframe_player .sub_contents_inner {
  margin-top: 35px;
}
.iframe_player header {
  height: 85px;
}
.iframe_player .header_menu {
  margin-right: 3px;
}
.iframe_player > .controller.miniset {
  position: absolute;
  left: 0;
  bottom: 20px;
  padding: 1px 9px;
  margin: 5px 0 0;
  width: 150px;
}
.iframe_player > .controller.miniset.semi_transparent:before {
  background-color: transparent;
}
.iframe_player > .controller.miniset:before {
  background-color: #fff;
}
.iframe_player > .controller.miniset .ctrl_direction_wrapper {
  width: auto;
}
.iframe_player > .controller.miniset .ctrl_direction_inner {
  padding-top: 100%;
}
.iframe_player > .controller.miniset .ctrl_direction2 {
  width: 96%;
  padding-bottom: 65.6%;
}
.iframe_player > .controller.miniset .ctrl_option_button2 {
  margin-right: -2%;
  width: 30%;
}
.iframe_player > .controller.miniset .ctrl_option_button1 {
  margin-left: -2%;
  width: 30%;
}

/*-上記の.iframe_playerの代わり  2018.06.07-*/
.controller.miniset.semi_transparent.map_viewer {
  position: absolute;
  top: inherit;
  right: inherit;
  bottom: inherit;
  left: inherit;
  padding: 1px 9px;
  margin: 5px 0 0;
  width: 150px;
}
.controller.miniset.semi_transparent.map_viewer.semi_transparent:before {
  background-color: transparent;
}
.controller.miniset.semi_transparent.map_viewer:before {
  background-color: #fff;
}
.controller.miniset.semi_transparent.map_viewer .ctrl_direction_wrapper {
  width: auto;
}
.controller.miniset.semi_transparent.map_viewer .ctrl_direction_wrapper .ctrl_direction_inner {
  padding-top: 100%;
}
.controller.miniset.semi_transparent.map_viewer .ctrl_direction_wrapper .ctrl_direction2 {
  width: 96%;
  padding-bottom: 65.6%;
}
.controller.miniset.semi_transparent.map_viewer .ctrl_direction_wrapper .ctrl_option_button2 {
  margin-right: -2%;
  width: 30%;
}
.controller.miniset.semi_transparent.map_viewer .ctrl_direction_wrapper .ctrl_option_button1 {
  margin-left: -2%;
  width: 30%;
}

.ctrl_set.floating_window.map_viewer {
  width: auto;
  min-width: 160px;
  top: 90px;
  left: 430px;
}
.ctrl_set.floating_window.map_viewer .other_area_iframe {
  /*-googlemap付き移動コントローラー-*/
  height: 150px;
  min-height: 50px;
  min-width: 158px;
}
.ctrl_set.floating_window.map_viewer .miniset > div {
  max-width: 140px;
}
.ctrl_set.floating_window.map_viewer .miniset .ctrl_direction_wrapper {
  max-width: inherit;
}
.ctrl_set.floating_window.map_viewer .miniset .ctrl_option_button1 {
  margin-left: 0;
  width: 25%;
}
.ctrl_set.floating_window.map_viewer .miniset .ctrl_option_button2 {
  margin-right: 0;
  width: 25%;
}
.ctrl_set.floating_window.map_viewer .miniset .ctrl_direction2 {
  width: 75%;
  padding-bottom: 51.25%;
}

/*-ドラッグ移動用のエリア-*/
.drag_area {
  width: 40px;
  height: 18px;
  border-radius: 0 0 6px 6px;
  background-color: #83b413;
  top: 1px;
  z-index: 100;
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  text-transform: capitalize;
  cursor: move;
}
.drag_area:before {
  content: "";
  display: inline-block;
  background-image: url(../img/common/button_icon2.png);
  -moz-background-size: 67px 700px;
  -o-background-size: 67px 700px;
  -webkit-background-size: 67px 700px;
  background-size: 67px 700px;
  background-position: 100% -660px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -webkit-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  left: 10px;
  top: -1px;
  position: absolute;
  opacity: 0.8;
}

/*- 上記のdrag_areaとは関係ない-*/
/*-メインエリア内ドラッグ操作エリア-*/
#cf_mapdrag_area_base {
  width: 100%;
  height: 15%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
  border-radius: 8px;
}

#cf_mapdrag_area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  cursor: move;
}

.map_div_drag {
  width: calc(100% - 10px);
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
}
.map_div_drag::before {
  /*-背景と枠線 矢印 上下左右-*/
  position: absolute;
  content: "";
  display: block;
  border: 1px solid #fff;
  border-radius: 6px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  background-image: url(../img/drag_bg2.png);
  background-size: 100% 100%;
}
.map_div_drag.arrow_x::before {
  /*- 矢印 左右-*/
  background-image: url(../img/drag_bg2x.png);
}
.map_div_drag.arrow_y::before {
  /*- 矢印 上下-*/
  background-image: url(../img/drag_bg2y.png);
}

/*- ドラッグ操作エリア内の方向マーク -*/
.mark_top {
  /*-センター合わせ上下-*/
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mark_right,
.mark_left {
  /*-センター合わせ縦のみ-*/
  position: absolute;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*- ドラッグ操作エリア以外を想定 -*/
.mark_bottom {
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.mark_bottomL,
.mark_bottomR {
  position: absolute;
  bottom: 1%;
}

.mark_bottomR {
  right: 6px;
}

.mark_bottomL {
  left: 6px;
}

/*- 画面上（main_area）で移動用のボタン -*/
.map_button_div {
  width: 100%;
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
  border-radius: 8px;
  position: static;
  width: 100%;
  margin: 0;
  height: 0;
  background-color: #f00;
}

.mark_top::before {
  margin-top: -1px;
  background-position: -0.2% 0%;
}

.mark_right {
  right: 6px;
}
.mark_right::before {
  margin-right: -1px;
  background-position: 5.70588% 0%;
}

.mark_bottom::before {
  background-position: 11.61176% 0%;
}

.mark_left {
  left: 6px;
}
.mark_left::before {
  margin-left: -1px;
  background-position: 17.51765% 0%;
}

.mark_div {
  position: static;
}
.mark_div::before {
  display: none;
}
.mark_div span {
  /*- マーク共通設定 -*/
  /*-2020.06.02 上下左右センターにするためにflexに変更 -*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(43, 43, 43, 0.4);
  border-radius: 50%;
  border: 2px solid #e5e5e5;
  width: 36px;
  height: 36px;
  opacity: 0.7;
  cursor: pointer;
  z-index: 999;
  opacity: 0.65;
  top: auto;
  bottom: auto;
}
.mark_div span:hover {
  background-color: rgba(15, 175, 236, 0.7);
  opacity: 1;
}
.mark_div span.off {
  /*-半透明強く-*/
  opacity: 0.6;
  background-color: #000;
  border-color: #666;
}
.mark_div span.off::before {
  opacity: 0.4;
}
.mark_div span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(../img/drag_mark2.png);
  background-size: 1700% 100%;
  border-radius: 50%;
  margin: 0;
}
.mark_div span.menu_light, .mark_div span.menu_lightW {
  /*-移動箇所が複数ある場合-*/
}
.mark_div span.menu_light::after, .mark_div span.menu_lightW::after {
  content: "";
  display: block;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  position: absolute;
  border: 1px solid #fff;
}
.mark_div span.menu_light::after {
  background-color: #ffc300;
}
.mark_div span.menu_lightW::after {
  background-color: #fff;
}
.mark_div span.col_00 {
  /*-黒半透明系背景-*/
  background-color: rgba(0, 0, 0, 0.4);
}
.mark_div span.ctrl_compass_direction {
  /*-コンパス用背景色-*/
  background-color: rgba(0, 0, 0, 0.6);
}
.mark_div span.mark_left, .mark_div span.mark_right {
  top: 2.3%;
  transform: none;
}
.mark_div span.mark_left, .mark_div span.mark_bottomL {
  left: 11px;
}
.mark_div span.mark_right, .mark_div span.mark_bottomR {
  right: 11px;
}
.mark_div span.mark_top {
  /*-センター合わせ横のみ-*/
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 2.3%;
}
.mark_div span[class*="mark_bottom"] {
  /*- mark_bottomを含む -*/
  bottom: 2%;
}
.mark_div span.mark_text, .mark_div span.mark_number {
  /*- 文字列用 -*/
  color: #f2f2f2;
  margin: 0 2px 0;
  text-shadow: 0 0 4px #000;
}
.mark_div span.mark_text::before, .mark_div span.mark_number::before {
  content: none;
}
.mark_div span.mark_text > span, .mark_div span.mark_number > span {
  background-color: transparent;
}
.mark_div span.mark_number {
  font-size: 150%;
}
.mark_div span.mark_text {
  font-size: 90%;
  font-weight: bold;
}

/*- 数字やテキストのボタン用div（最大5）　-*/
.sub_mark_div {
  display: flex;
  /* border: 1px solid #f00; */
  width: 230px;
  position: absolute;
  bottom: 2%;
}
.sub_mark_div.pos_left {
  left: 50px;
}
.sub_mark_div.pos_right {
  right: 50px;
  /*-順番を逆からにする-*/
  flex-direction: row-reverse;
}
.sub_mark_div span::before {
  content: none;
}
.sub_mark_div span span {
  display: block;
  justify-content: normal;
  align-items: normal;
  background-color: inherit;
  border-radius: 0;
  border: none;
  width: auto;
  height: auto;
  opacity: 1;
  z-index: auto;
  top: auto;
  bottom: auto;
  font-weight: inherit;
}

/*- 文字最小サイズ以下にするための縮小用 -*/
.size60p {
  -moz-transform: scale(0.6, 0.6);
  -ms-transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transform: scale(0.6, 0.6);
}

.size70p {
  -moz-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  -webkit-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
}

.size80p {
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  -webkit-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);
}

.size90p {
  -moz-transform: scale(0.9, 0.9);
  -ms-transform: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
}

/*- 各種ボタン用class -*/
.map_button_div span.ctrl_expand::before {
  /*-拡大-*/
  background-position: 47.04706% 0%;
}
.map_button_div span.ctrl_contract::before {
  /*-縮小-*/
  background-position: 52.95294% 0%;
}
.map_button_div span.ctrlTablechat_btn::before {
  /*-座る（チャット）-*/
  background-position: 23.42353% 0%;
}
.map_button_div span.ctrlMapReturn_btn {
  /*-戻る-*/
}
.map_button_div span.ctrlMapReturn_btn::before {
  background-position: 35.23529% 0%;
}
.map_button_div span.ctrlSearchItem_btn::before {
  /*-呼出-*/
  background-position: 29.32941% 0%;
}
.map_button_div span.ctrlSearchItem2_btn::before {
  /*-虫メガネ-*/
  background-position: 58.85882% 0%;
}
.map_button_div span.ctrlChangingroom_btn::before {
  /*-着替え-*/
  background-position: 41.14118% 0%;
}
.map_button_div span.ctrl_compass::before {
  /*-コントローラー切り替え（コンパスアイコン）-*/
  background-position: 64.76471% 0%;
}
.map_button_div span.ctrl_normal::before {
  /*-コントローラー切り替え（通常移動アイコン）-*/
  background-position: 70.67059% 0%;
}
.map_button_div span.ctrlGooglemapOn_btn::before {
  /*- googlemap表示ボタン -*/
  background-position: 76.57647% 0%;
}
.map_button_div span.ctrlGooglemapOff_btn::before {
  /*- googlemap 消すボタン -*/
  background-position: 82.48235% 0%;
}
.map_button_div span.ctrl_viewUp_btn::before {
  /*- 上を見るボタン -*/
  background-position: 88.38824% 0%;
}
.map_button_div span.ctrl_viewDown_btn::before {
  /*- 下を見るボタン -*/
  background-position: 94.29412% 0%;
}
.map_button_div span.ctrl_menu_light::before {
  /*- 長押しボタン用 何もない背景 -*/
  background: none;
}

.ctrl_compass_direction::before {
  /*- コンパス表示用 -*/
  background-position: 100.2% 0%;
}
.ctrl_compass_direction.dir_0::before {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.ctrl_compass_direction.dir_1::before {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ctrl_compass_direction.dir_2::before {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.ctrl_compass_direction.dir_3::before {
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.ctrl_compass_direction.dir_4::before {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.ctrl_compass_direction.dir_5::before {
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.ctrl_compass_direction.dir_6::before {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.ctrl_compass_direction.dir_7::before {
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

/*- 半透明ウィンドウ -*/
.semi_transparent_window {
  min-height: 64px;
  z-index: 10;
  -moz-box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
  -webkit-box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
  box-shadow: 0px 1px 1px 1px rgba(77, 77, 77, 0.3);
  padding: 8px 5px 8px;
  border-radius: 4px;
  display: inline-block;
  background-color: rgba(51, 51, 51, 0.6);
  overflow: hidden;
  position: absolute;
  top: auto;
  left: auto;
  margin: 0;
  width: 128px;
}
.semi_transparent_window::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background-color: transparent;
  border: 11px solid #d4d4d4;
  border-radius: 22px;
  left: -10px;
  right: -10px;
  top: -10px;
  bottom: -10px;
  opacity: 1;
}
.semi_transparent_window[class*="pos_top"] {
  /*- pos_topを含む -*/
  top: 0;
  border-radius: 0 0 6px 6px;
  left: 50%;
  padding: 5px 5px 8px;
}
.semi_transparent_window[class*="pos_top"]::before {
  border-radius: 0 0 26px 26px;
  border-top: none;
}
.semi_transparent_window.pos_topR {
  /*-上右配置-*/
  margin-left: 20px;
}
.semi_transparent_window.pos_topL {
  /*-上左配置-*/
  margin-left: -148px;
}
.semi_transparent_window[class*="pos_bottom"] {
  /*- pos_bottomを含む -*/
  bottom: 0;
  border-radius: 6px 6px 0 0;
  left: 50%;
}
.semi_transparent_window[class*="pos_bottom"]::before {
  border-radius: 26px 26px 0 0;
  border-bottom: none;
  padding: 8px 5px 5px;
}
.semi_transparent_window.pos_bottomR {
  /*-上右配置-*/
  margin-left: 20px;
}
.semi_transparent_window.pos_bottomL {
  /*-上左配置-*/
  margin-left: -148px;
}
.semi_transparent_window > div {
  position: relative;
  z-index: 10;
}
.semi_transparent_window button {
  border: none;
  background-color: #a9dd31;
  border-radius: 5px;
  border-bottom: 2px solid #94c327;
  vertical-align: top;
  color: #fff;
  font-weight: bold;
  text-align: left;
  background-clip: padding-box;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  /*- line-height: 1.3; */
  font-size: 98%;
  min-width: 45px;
  display: inline-block;
  text-align: center;
  min-height: 20px;
  padding: 0;
  margin: 1px 0 1px;
  background-color: #9dd223;
  border-bottom: 2px solid #577d00;
  border-radius: 6px;
  width: 100%;
}
.semi_transparent_window button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
  opacity: 0.65;
}
.semi_transparent_window button:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.semi_transparent_window button.gray_b, .semi_transparent_window button.b_gray {
  background-color: #f2f2f2;
  color: #bfbfbf;
  border: none;
  font-weight: normal;
  text-shadow: none;
}
.semi_transparent_window button.gray_b:hover, .semi_transparent_window button.b_gray:hover {
  background-color: #f1f1f1;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.semi_transparent_window button.gray_b:active, .semi_transparent_window button.b_gray:active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.list_button_icon img {
  height: 100%;
  z-index: 1;
  position: absolute;
}
.list_button_icon a {
  flex-grow: 2;
  order: 2;
}
.list_button_icon .icon_right {
  border-radius: 5px 5px 20px 5px;
  right: 0%;
  order: 3;
}
.list_button_icon .icon_left {
  border-radius: 20px 5px 5px 5px;
  left: 0%;
  order: 1;
}